我收到此错误:
Error: Invariant failed: You should not use <Switch> outside a <Router>
但让我发疯的是我的“Switch”标签实际上被“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>
);
}
在检查路由器模块版本时，我得到以下信息:
├─┬ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae9e5e4e4efe9feefeea7f8efebe9fea7f8e5fffeeff8cabca4b3a4b8" rel="noreferrer noopener nofollow">[email protected]</a> extraneous
│ └── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e49681858790c9968b91908196a4d2cad4cad6" rel="noreferrer noopener nofollow">[email protected]</a> deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
├─┬ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6012050103144d120f151405124d040f0d20564e504e52" rel="noreferrer noopener nofollow">[email protected]</a> extraneous
│ └── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4735222624336a352832332235077169776975" rel="noreferrer noopener nofollow">[email protected]</a> deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router
└── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c0d7d3d1c69fc0ddc7c6d7c0f2849c829c80" rel="noreferrer noopener nofollow">[email protected]</a> invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router extraneous
最佳答案
目前没有出现connected-react-router支持react-router-dom版本 6。
├─┬ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22414d4c4c47415647460f50474341560f504d5756475062140c1b0c10" rel="noreferrer noopener nofollow">[email protected]</a> extraneous │ └── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b190e0a081f4619041e1f0e192b5d455b4559" rel="noreferrer noopener nofollow">[email protected]</a> deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router ├─┬ <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a5b2b6b4a3faa5b8a2a3b2a5fab3b8ba97e1f9e7f9e5" rel="noreferrer noopener nofollow">[email protected]</a> extraneous │ └── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1d3c4c0c2d58cd3ced4d5c4d3e1978f918f93" rel="noreferrer noopener nofollow">[email protected]</a> deduped invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router └── <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6012050103144d120f1514051220564e504e52" rel="noreferrer noopener nofollow">[email protected]</a> invalid: "^4.3.1 || ^5.0.0" from node_modules/connected-react-router extraneous
您使用的是最新版本的connected-react-router (6.9.2) 你可以看到here它仍然列出 react-router-dom v4/5 作为对等依赖项。
"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"
},
虽然看起来可能有更新计划connected-react-router支持react-router-dom版本 6。有一些讨论 here在connected-react-router的问题跟踪器以及可能的解决方法。
如果您没有迫切需要或渴望使用 react-router-dom，则除了此可能的解决方法之外版本 6，那么我建议恢复到版本 5。从项目目录运行以下命令来卸载 v6 并安装 v5。
-
npm uninstall -s react-router-dom -
npm install -s <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe8c9b9f9d8ad38c918b8a9b8cd39a9193becbd0cdd0ce" rel="noreferrer noopener nofollow">[email protected]</a>或任何其他特定的 v5.x 版本
关于reactjs - 错误: Invariant failed: You should not use <Switch> outside a <Router> even though my structure is good，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70318735/