错误：useRoutes() 可能只能在组件的上下文中使用，<Router>即使应用程序包装在 BrowserRouter 周围

Question

我需要在两条路径之间路由，我安装了npm install react-router(react router:6.2.1和react routerdom:5.20(。

我在网页Error: useRoutes() may be used only in the context of a <Router> component.中收到一个错误，这最终意味着我不能用BrowserRouter扭曲我的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

function App() {
return (
<>
<Routes>
<Route path ="/" element={<Main />} />
<Route path ="gigs" element={<Gigs />} />
</Routes>
</>
);
}

Answer 1

这里的问题是您指定了两个不同的版本。您使用的路由器来自v5，但Routes和Route组件需要一个提供特定v6上下文的v6路由器。

如果您使用的是react-router-dom版本6组件，则需要使用react-router-dom的版本6。您可以删除react-router，因为react-router-dom会重新导出这些组件。

从项目目录运行命令：

1. Unintallreact-router和react-router-dom

   npm uninstall -s react-router react-router-dom

2. 安装react-router-dom版本6

   npm install -s react-router-dom

Answer 2

这里的问题是react路由器版本和您要使用的版本之间的错误。。。

你需要确定你喜欢使用哪个版本，如果是v6，那么你需要遵循v6规则，如果是v5，那么你就需要遵循v5…

例如：

"react-router": "6.2.1",
"react-router-dom": "6.2.1"

现在针对代码差异：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>

在V5中：

<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
</Switch>
</div>
</Router>

查看这些链接v6v5

Answer 3

我确信您不需要将Routes组件封装在React Fragment中。它似乎也可能导致反应路由器的问题，如这里所述。

此外，我会在gigs前面添加一个/，或者在/路由中嵌套gigs路由。

Answer 4

您可以尝试用这种方式包装组件，而不是

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>
);