Invariant failed: You should not use <Route> outside a <Router> Invariant failed: You should not use <Route> outside a <Router> reactjs reactjs

Invariant failed: You should not use <Route> outside a <Router>


I solved this problem by changing:

import {Route, Switch} from "react-router";

to

import {Route, Switch} from "react-router-dom";

just add -dom.


I had this problem whilst testing and solved it by wrapping my test component with Routers.

import React from 'react';import ReactDom from 'react-dom';import Header from '../components/Header/Header';import { BrowserRouter } from 'react-router-dom';it('renders Header without crashing', () => {  const div = document.createElement('div');  ReactDom.render(    <BrowserRouter>      <Header />    </BrowserRouter>,   div);  ReactDom.unmountComponentAtNode(div);});

Jest, Enzyme: Invariant Violation: You should not use or , Totest a component (with Jest) that contains and withRouter youneed to import Router in you test, not in your component import {BrowserRouter as Invariant Violation: You should not use orwithRouter() outside a According to react router 4 docs, thecomponents are considered valid, where I can create componentscomposed of s, then import them into another component andplace inside a .