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

IT技术 reactjs react-router react-router-dom
2021-04-13 03:46:30

我已经安装了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;
4个回答

它认为问题在于您仍然需要将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;

根据您的需要重构。

在BrowserRouter as Router, 缺少在我身边。
2021-06-04 03:46:30

您应该在树中的更高位置有一个<BrowserRouter>（或任何提供的路由器）。这样做的原因是<BrowserRouter>提供了一个历史上下文，在使用useRoutes(). 请注意，更高意味着它不能在<App>自身中，但至少在呈现它的组件中。

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

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


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

在 index.js 中提及下面的代码

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

它的意思是在你的索引 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"),
);
其它你可能感兴趣的问题
上一篇react onClick 事件 下一篇使用 webpack 将资产文件夹推送到公共目录