JIYIK CN >

When we have 2 router components in the same React application, we will get the error “You cannot render a <Router>inside another <Router>“. To fix this error, you need to make sure you use the router in your index.js file and do not use any nested router components.

Make sure the App component in the index.js file is included in the Router component.

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

RouterAnd remove any nested or BrowserRoutercomponents from our App .

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

Your entire React application should be wrapped in just one Router (or BrowserRouter) component.

The best place to wrap your React application with a Router component is in the index.js file, since this is the entry point for your React application.

Once our entire application is wrapped in a Router component, we can use any hook from the react router package anywhere in the component.

If you cannot find where the Router component is used, you can use the IDE to find <Router>where it is used.

In VSCode, we can use the shortcut CTRL + Shift + fSearch <Router>and find the nested instance of the Router (or BrowserRouter) component that must be deleted.

We should not have more than one router in our React application.