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

Posted 2023-02-21

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

【英文标题】：React Router V6 - Error: useRoutes() may be used only in the context of a <Router> component

【发布时间】：2021-04-02 04:06:56

【问题描述】：

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

【参考方案1】：

它认为问题在于您仍然需要将 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, 不见了。

【参考方案2】：

它的意思是在你的 index 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"),
);

【参考方案3】：

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

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

【参考方案4】：

你应该在树的更高处有一个<BrowserRouter>（或the provided routers 中的任何一个）。这样做的原因是<BrowserRouter> 提供了一个历史上下文，在使用useRoutes() 创建路由时需要该上下文。请注意，更高的意思是它不能在<App> 本身中，但至少在呈现它的组件中。

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

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


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

【参考方案5】：

只想报告一个类似的问题——在撰写本文时 (v6.2.1)，如果您从 react-router 而不是 react-router-dom 导入，您似乎也确实遇到了这个错误。对我来说是一个代价高昂的错字。

即，确保您从react-router-dom 导入Routes 和Route 而不是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';