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

Question

I use react-router-dom for routing in my React application. Part of my app extracted in another package. List of dependencies looks like this:

./app/dashboard/package.json

{   "dependencies": {     "@app/components": "^1.0.0",     "react": "^16.8.5",     "react-dom": "^16.8.5",     "react-router-dom": "^5.0.0"   } } 

./app/components/package.json

{   "peerDependencies": {     "react-router-dom": "^5.0.0"   } } 

When I use components from @app/components which require components from react-router-dom I getting this errors:

Uncaught Error: Invariant failed: You should not use <Route> outside a <Router>  The above error occurred in the <Context.Consumer> component: Uncaught (in promise) Error: Invariant failed: You should not use <Route> outside a <Router> 

Why throws this error? In App.js I use BrowserRouter

import React, { Suspense } from 'react'; import { Switch, Route } from 'react-router-dom'; import { Placeholder } from '@app/components';  const Auth = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Auth')); const Index = React.lazy(() => import(/* webpackPrefetch: true */ './pages/Index'));  const App = () => (   <Suspense fallback={<Placeholder />}>     <Switch>       <Route path="/auth" component={Auth} />       <Route path="/" component={Index} />     </Switch>   </Suspense> );  export default App; 

client.jsx

import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter } from 'react-router-dom';  import App from './App';  render(   <BrowserRouter>     <App />   </BrowserRouter>,   document.getElementById('root'), ); 

Answer 1

I solved this problem by changing:

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

to

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

just add -dom.

Answer 2

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 , To test a component (with Jest) that contains and withRouter you need to import Router in you test, not in your component import { BrowserRouter as Invariant Violation: You should not use or withRouter() outside a According to react router 4 docs, the components are considered valid, where I can create components composed of s, then import them into another component and place inside a .