React 修复 Uncaught Error： You cannot render a Router inside another Router 错误

React 2年前 42

当我们在同一个 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>;
}