Error: Invariant failed: You should not use outside a even though my structure is good

Question

I'm getting this error :

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

But what's driving me crazy is the fact that My "Switch" tag actually is surrounded by "BrowserRouter"..

import {BrowserRouter, Route} from "react-router-dom";
import {Switch} from "react-router";
....
function App() {
    return (
        <AuthContext>
            <BrowserRouter>
                <div className="app">
                    <Switch>
                        <Route exact path='/login' component={Login}/>
                        <Route exact path='/register' component={Register}/>
                    </Switch>
                </div>
            </BrowserRouter>
        </AuthContext>
    );
}

When checking the router modules versions, I get this :

├─┬ connected-react-router@6.9.2 extraneous
│ └── react-router@6.0.2 deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
├─┬ react-router-dom@6.0.2 extraneous
│ └── react-router@6.0.2 deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
└── react-router@6.0.2 invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router extraneous

Check versions for react-router and react-router-dom packages, are they the same? — skyboyer, Dec 11 '21 at 20:30
@skyboyer I need more details behind your answer, what do I need to check exactly ? — naspy971, Dec 11 '21 at 20:31
Why aren't you importing `Switch` from `react-router-dom`? Skyboyer is asking you to run `npm list react-router react-router-dom` from your project directory and report back the versions you have installed. Do you have any other `Switch` components rendered outside this `App` component? — Drew Reese, Dec 11 '21 at 20:36
@DrewReese, I have this issue "Attempted import error: 'Switch' is not exported from 'react-router-dom'." when importing Switch from react-router-dom — naspy971, Dec 11 '21 at 20:43
You've probably installed `react-rotuer-dom` version 6, which doesn't export a `Switch` component as it was replaced by the `Routes` component. The version ca be verified if you run the `npm list` command specified in earlier comment. — Drew Reese, Dec 11 '21 at 20:45
you use it like react router v5, but you installed react router v6. v6 docs: https://reactrouter.com/docs/en/v6/getting-started/installation. or install v5 — TheWuif, Dec 11 '21 at 20:50
From what I can see I don't think `connected-react-router` has been updated yet to be compatible with RRDv6. If you run `npm un -s react-router-dom` then `npm i -s react-router-dom@5.3.0` to downgrade back to DDRv5 do you still see the issue with the `Switch` and router? — Drew Reese, Dec 11 '21 at 20:53
@DrewReese, you can post an answer i guess since downgrading react-router-dom version fixed my issue. — naspy971, Dec 11 '21 at 21:46

score 3 · Accepted Answer · answered Dec 11 '21 at 22:02

Currently it does not appear connected-react-router supports react-router-dom version 6.

├─┬ connected-react-router@6.9.2 extraneous
│ └── react-router@6.0.2 deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
├─┬ react-router-dom@6.0.2 extraneous
│ └── react-router@6.0.2 deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
└── react-router@6.0.2 invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router extraneous

You are on the latest version of connected-react-router (6.9.2) and you can see here it still lists react-router-dom v4/5 as a peer dependency.

"peerDependencies": {
  "history": "^4.7.2",
  "react": "^16.4.0 || ^17.0.0",
  "react-redux": "^6.0.0 || ^7.1.0",
  "react-router": "^4.3.1 || ^5.0.0", // <-- not v6
  "redux": "^3.6.0 || ^4.0.0"
},

Though it seems there is possibly a plan to update connected-react-router to support react-router-dom version 6. There's some discussion here in connected-react-router's issue tracker with a possible work-around.

Outside of this possible work around if you've no pressing need, or desire, to use react-router-dom version 6 then I suggest reverting back to version 5. From your project's directory run the following commands to uninstall v6 and install v5.

npm uninstall -s react-router-dom
npm install -s react-router-dom@5.3.0 or any other specific v5.x version

Error: Invariant failed: You should not use outside a even though my structure is good

1 Answers1