如何修复React中「不能在<Router>内渲染另一个<Router>」的错误？

错误提示：You cannot render a <Router> inside another <Router>. You should never have more than one in your app.

现有代码： #

App.js

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './Component/Navbar';
import Login from './Component/Login';
import Register from './Component/Register';

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Route exact path="/" component={Home} />
        <Route path="/Login" component={Login} />
        <Route path="/Register" component={Register} />
      </Router>
    </div>
  );
}

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

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

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

修复方案 #

问题根源是应用中存在两个Router实例：index.js里的<BrowserRouter>和App.js里的<Router>（本质也是BrowserRouter），react-router-dom不允许这种嵌套结构。

修改App.js，移除内部的<Router>包裹，因为外层已经通过index.js提供了Router上下文：

import React from 'react';
import { Route } from 'react-router-dom'; // 不再导入Router
import Navbar from './Component/Navbar';
import Login from './Component/Login';
import Register from './Component/Register';

function App() {
  return (
    <div className="App">
      <Navbar />
      <Route exact path="/" component={Home} />
      <Route path="/Login" component={Login} />
      <Route path="/Register" component={Register} />
    </div>
  );
}

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

export default App;

修改后整个应用仅保留一个Router实例，错误会消失，页面也能正常渲染。

内容的提问来源于stack exchange，提问作者ho loo