Question

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

2021-12-20

15330

reactjs react-router react-router-dom

我需要在 2 条路径之间路由，我安装了 npm install react-router (react-router: 6.2.1 和 react-router-dom: 5.2.0)。

我在网页中收到一条错误消息 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 会重新导出这些组件。

从项目目录运行以下命令：

卸载 react-router 和 react-router-dom

npm uninstall -s react-router react-router-dom
安装 react-router-dom 版本 6

npm install -s react-router-dom

Answer 2

这里的问题是 React Router 版本与您要使用的版本之间的错误...

您需要确定您喜欢使用哪个版本，如果是 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>

请参阅这些链接 v6 v5

Answer 3

我很确定您不需要将 Routes 组件包装在 React Fragment 中。它似乎还可能导致 React Router 出现问题如此处所述。

此外，我还会在 gigs 前面添加 / ，或将 gigs 路由嵌套在 / 路由中。