profile
viewpoint

Ask questionsError: Invariant failed: You should not use <Switch> outside a <Router>

<!-- Thank you for contributing!

Have a usage question?

The issue tracker is meant for bug reports only. This isn't the best place for usage questions. Questions here don't have as much visibility as they do elsewhere. Before you ask a question, here are some resources to get help first:

  • Read the docs: https://reacttraining.com/react-router
  • Check out the list of frequently asked questions: https://github.com/ReactTraining/react-router/blob/master/FAQ.md
  • Explore examples: https://reacttraining.com/react-router/web/example/basic
  • Look for/ask questions on Stack Overflow: https://stackoverflow.com/questions/ask?tags=react-router
  • Ask in chat: https://discord.gg/0ZcbPKXt5bYaNQ46

Think you found a bug?

The best bug report is a failing test in the repository as a pull request. Otherwise, please use the "BUG REPORT" template below.

Have a feature request?

Remove the template from below and provide thoughtful commentary and code samples on what this feature means for your product. What will it allow you to do that you can't do today? How will it make current work-arounds straightforward? What potential bugs and edge cases does it help to avoid? etc. Please keep it product-centric. -->

<!-- BUG TEMPLATE -->

Version

5.0.1

Steps to reproduce

I have a monorepo setup:

apps/
  app1/
    lib/
      app.js <- webpack output
    src/
      App.tsx <- webpack entry
packages/
  server/
    src/
      server.tsx

App.tsx

import { Switch, Route } from 'react-router-dom';
...
const App = () => (
  <Switch>
    <Route path="/" exact component={Home} />
  </Switch>
);

export default App;

server.tsx

import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';

import App from '../../../apps/app1/lib/app'; // Error: Invariant failed: You should not use <Switch> outside a <Router>
// import App from '../../../apps/app1/src'; // everything works as expected
...
renderToString(
  <StaticRouter location={location} context={context}>
    <App />
  </StaticRouter>
);
...

Expected Behavior

No error is thrown

Actual Behavior

False positive error is thrown: "Error: Invariant failed: You should not use <Switch> outside a <Router>"

ReactTraining/react-router

Answer questions timdorr

https://github.com/ReactTraining/react-router/issues/6789#issuecomment-502490351

useful!

Related questions

Cannot read property &#39;location&#39; of undefined at useLocation hot 9
Route is not exported in react-router-dom hot 6
Replace componentWillMount by UNSAFE_componentWillMount for v3 hot 3
Use new forwardRef API in withRouter HOC hot 2
useParams returns empty object when used outside of Route hot 2
Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component hot 2
useParams and other new hooks are not exported in react-router-dom & react-router hot 2
react-router-dom v5 does not work with electron in production hot 2
Prompt in React 16 "Warning: A history supports only one prompt at a time" hot 1
Fix <Route children> hot 1
Route is not exported in react-router-dom hot 1
bug: react router dom 4.3.1 pulling react-router 4.4.0 changes after latest publish hot 1
[React.memo] Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function` hot 1
Receiving ESM Error but not using ESM hot 1
useParams and other new hooks are not exported in react-router-dom & react-router hot 1
source:https://uonfu.com/
Github User Rank List