[英]Error: useRoutes() may be used only in the context of a <Router> component even if the app is wrapped around BrowserRouter
I need to route between 2 paths, I installed npm install react-router
(react-router: 6.2.1 and react-router-dom: 5.2.0).我需要在 2 条路径之间进行路由,我安装了
npm install react-router
(react-router:6.2.1 和 react-router-dom:5.2.0)。
I get a error saying in the webpage Error: useRoutes() may be used only in the context of a <Router> component.
我在网页中收到一条错误
Error: useRoutes() may be used only in the context of a <Router> component.
which eventually meant I din't warp my index.js file with BrowserRouter but I did.这最终意味着我不会用 BrowserRouter 扭曲我的 index.js 文件,但我做到了。
Code: index.js代码: index.js
import {BrowserRouter as Router} from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById("root")
);
app.js应用程序.js
function App() {
return (
<>
<Routes>
<Route path ="/" element={<Main />} />
<Route path ="gigs" element={<Gigs />} />
</Routes>
</>
);
}
The issue here the mistake between react router version and which version you target to use...这里的问题是反应路由器版本与您使用的目标版本之间的错误......
you need to determine which version you like to use, if v6, then you need to follow the v6 rule, if v5 then you need to follow v5...你需要确定你喜欢使用哪个版本,如果是v6,那么你需要遵循v6规则,如果是v5那么你需要遵循v5...
for example:例如:
"react-router": "6.2.1",
"react-router-dom": "6.2.1"
Now for the code diff: in V6:现在查看代码差异:在 V6 中:
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="dashboard" element={<Dashboard />} />
{/* Using path="*"" means "match anything", so this route
acts like a catch-all for URLs that we don't have explicit
routes for. */}
<Route path="*" element={<NoMatch />} />
</Route>
</Routes>
in V5:在 V5 中:
<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>
I'm pretty sure you don't need to wrap your Routes
component in a React Fragment.我很确定您不需要将
Routes
组件包装在 React Fragment 中。 It also seems that it might cause problems with react router as mentionned here .似乎它也可能会导致此处提到的反应路由器出现问题。
Also I would either add a /
in front of gigs
, or nest the gigs
route in the /
route.另外我会在
gigs
前面添加一个/
,或者将gigs
路由嵌套在/
路由中。
The issue here is that you are specifying two different versions.这里的问题是您指定了两个不同的版本。 The router you are using is from v5, but the
Routes
and Route
components are expecting a v6 router providing a specific v6 context.您使用的路由器来自 v5,但
Routes
和Route
组件需要一个提供特定 v6 上下文的 v6 路由器。
If you are using react-router-dom
version 6 components then you need to use version 6 of react-router-dom
.如果您使用
react-router-dom
版本 6 组件,那么您需要使用react-router-dom
-router-dom 版本 6。 You can remove react-router
since react-router-dom
re-exports these components.您可以删除
react-router
,因为react-router-dom
会重新导出这些组件。
From the project directory run the commands:从项目目录运行命令:
Unintall react-router
and react-router-dom
卸载
react-router
和react-router-dom
npm uninstall -s react-router react-router-dom
Install react-router-dom
version 6安装
react-router-dom
版本 6
npm install -s react-router-dom
You can try to wrapp your component in this way instead您可以尝试以这种方式包装您的组件
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.