小能豆

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

javascript

我已经安装了react-router-domV6-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;

阅读 50

收藏
2024-06-12

共1个答案

小能豆

您应该在树中拥有一个<BrowserRouter>(或任何提供的路由器<BrowserRouter>)。这样做的原因是,提供了一个历史上下文,这是在使用创建路由时所需的useRoutes()。请注意,更高意味着它不能在本身中<App>,但至少在渲染它的组件中。

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

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


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