(React) 你不能在另一个 Router 中渲染一个 Router

(React) You cannot render a Router inside another Router

当我们在同一个 React 应用程序中有 2 个 Router 组件时，会出现错误“You cannot render a <Router>inside another ”。<Router>

要解决该错误，请确保Router在您的index.js文件中使用 a 并且不使用任何嵌套Router组件。

您不能在另一个路由器内渲染路由器

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

索引.js


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>
);

并从您的应用程序中删除任何嵌套Router或BrowserRouter组件。

应用程序.js


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

// 👇️ don't wrap in <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）组件中。

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

一旦你的整个应用程序被一个组件包裹起来Router，你就可以在你的组件中的任何地方使用 React 路由器包中的任何钩子。

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

在 VSCode 中，您可以CTRL + Shift + f搜索和查找必须删除的（或）组件<Router>的嵌套实例。RouterBrowserRouter

在你的 React 应用程序中你不应该有超过一个Router。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：