React Router V6 - 错误：useRoutes() 只能在 <Router> 组件的上下文中使用

Question

我已经安装了

react-router-dom

V6-beta。通过遵循网站上的示例，我可以使用新选项

useRoutes

我已设置页面路由并将其返回到

App.js

文件中。

保存后出现以下错误：

错误：useRoutes() 只能在组件上下文中使用。

我想知道我是否在这里遗漏了什么？我已经在

src/pages

文件夹中创建了页面。

我的代码：

import { BrowserRouter, Link, Outlet, useRoutes } from 'react-router-dom';

// Pages
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Gallery from './pages/Gallery';
import Prices from './pages/Prices';
import Contact from './pages/Contact';

const App = () => {
    const routes = useRoutes([
        { path: '/', element: <Home /> },
        { path: 'o-nama', element: <About /> },
        { path: 'usluge', element: <Services /> },
        { path: 'galerija', element: <Gallery /> },
        { path: 'cjenovnik', element: <Prices /> },
        { path: 'kontakt', element: <Contact /> }
    ]);

    return routes;
};

export default App;

Answer 1

您应该在树的较高位置有一个

<BrowserRouter>

（或任何 提供的路由器）。原因是

<BrowserRouter>

提供了使用

useRoutes()

创建路由时所需的历史上下文。请注意，较高的位置意味着它不能位于

<App>

本身中，但至少位于渲染它的组件中。

您的入口点可能如下所示：

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

Answer 2

我认为问题是你仍然需要将

routes

(

Routes

/

useRoutes

) 包装在

Router

元素内。

所以一个例子看起来像这样：

import React from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useRoutes,
} from "react-router-dom";

const Component1 = () => {
  return <h1>Component 1</h1>;
};

const Component2 = () => {
  return <h1>Component 2</h1>;
};

const App = () => {
  let routes = useRoutes([
    { path: "/", element: <Component1 /> },
    { path: "component2", element: <Component2 /> },
    // ...
  ]);
  return routes;
};

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

export default AppWrapper;

根据您的需求进行重构。

Answer 3

它的意思是在你的索引js或App JS中用BrowserRouter包装，就像这样

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <BrowserRouter>  // Like This here I am using
                <App />
           </BrowserRouter>
       </Provider>
    </React.StrictMode>,
    document.getElementById("root"),
);

Answer 4

在index.js中提及以下代码

import { BrowserRouter as Router } from "react-router-dom";

Answer 5

代码：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 6

尝试在index.js而不是App.js中添加路由。您的 App.js 是从 index.js 调用的。在index.js中，你的外部页面是这样调用的

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Navbar />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);

Answer 7

只想报告类似的问题 - 截至撰写本文（v6.2.1）时，如果您从

react-router

而不是

react-router-dom

导入，似乎您实际上也会遇到此错误。我的错字代价高昂。

即，确保您从

Routes

导入

Route

和

react-router-dom

，而不是

react-router

// This is deceptively valid as the components exist, but is not the intended usage
import { Routes, Route } from 'react-router';

// This works and is the intended usage
import { Routes, Route } from 'react-router-dom';

Answer 8

> Following codes works since react-router-dom syntax changed because of React 18.

  import logo from './logo.svg';
    import './App.css';
    import Header from './components/Header';
    import Login from './components/Login';
    import {
      BrowserRouter as Router,
      Routes,
      Route,
      useRoutes,
    } from 'react-router-dom';
    import Signup from './components/Signup';
    
    function AppRoutes() {
      const routes = useRoutes(
        [
          {path:'/',element:<Login/>},
          {path:'/signup',element:<Signup/>}
        ]
      )
      return routes;
    }
    function App(){
      return (
        <Router>
          <Header/>
          <AppRoutes />
        </Router>
      )
    }
    
    export default App;

Answer 9

尝试

const Routes = () => useRoutes([]) 

然后像这样将其包装在App.js中

<BrowserRouter> 
    <Routes />
</BrowserRouter>

它对我有用

Answer 10

我收到此错误是因为我捆绑了两个不同版本的react-router-dom。

如果您使用 npm/yarn 工作区，请检查顶级 node_modules 文件夹中是否只有一个已安装的

react-router-dom

版本

Answer 11

如果您收到此错误，则说明您忘记在 App.js 中用

<Route>

标签包装您的

<BrowserRouter>

标签。顺便说一句，您还可以将整个应用程序组件包装在index.js中，而不是将其包装在App.js中的标签中。