迹忆客 专注技术分享

当我们在同一个 React 应用程序中有 2 个路由器组件时，会出现错误 “You cannot render a <Router> inside another <Router>“。 要解决此错误，需要确保在 index.js 文件中使用路由器，并且不要使用任何嵌套的路由器组件。

确保 index.js 文件中的 App 组件包含在 Router 组件中。

import {createRoot} from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 👇️ wrap App in Router

root.render(
  <Router>
    <App />
  </Router>
);

并从我们的 App 中移除任何嵌套的 Router 或 BrowserRouter 组件。

import React from 'react';
import {Route, Link, Routes} from 'react-router-dom';

// 👇️ 不要在 <Router> 进行封装
export default function App() {
  return (
    <div>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/about" element={<About />} />
          <Route path="/" element={<Home />} />
        </Routes>
      </div>
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

整个 React 应用程序应该只包装在一个 Router（或 BrowserRouter）组件中。

用 Router 组件封装 React 应用程序的最佳位置是在 index.js 文件中，因为这是 React 应用程序的入口点。

一旦我们的整个应用被一个 Router 组件包裹，那么我们就可以在组件的任何地方使用来自 react router 包的任何钩子。

如果找不到使用路由器组件的位置，可以使用 IDE 查找使用 <Router> 的位置。

在 VSCode 中，我们可以使用快捷键 CTRL + Shift + f 搜索 <Router> 并找到必须删除的 Router（或 BrowserRouter）组件的嵌套实例。

我们的 React 应用程序中不应该有多个路由器。