React-Router-Dom v6路由报错：不可在<Router>内渲染另一个<Router>

问题原因 #

报错明确指出不能在一个<Router>内部渲染另一个<Router>。你的index.js已经在根节点层级包裹了唯一的<Router>，但某个子组件（比如Navbar或About）中肯定也引入并渲染了<Router>组件，导致应用存在多个Router实例，触发冲突。

修复步骤 #

1. 排查并移除子组件中的冗余Router
   打开Navbar.js、About.js等路由相关子组件，查找是否存在类似代码：

   import { BrowserRouter as Router } from 'react-router-dom';
   
   // ...
   return (
     <Router>
       {/* 组件内容 */}
     </Router>
   )
   

   将这些多余的<Router>标签完全删除，只保留index.js中根节点的那一个Router实例。

2. 规范子组件的路由用法
   子组件中如果需要实现页面跳转（比如导航链接），直接引入Link组件即可，无需再包裹Router：

   // Navbar.js 正确示例
   import { Link } from 'react-router-dom';
   
   function Navbar() {
     return (
       <nav>
         <Link to="/">首页</Link>
         <Link to="/about">关于</Link>
       </nav>
     )
   }
   

3. 验证修复效果
   重启应用，确认报错消失，路由跳转功能正常运行。

额外注意事项 #

• React Router v6强制要求整个应用只能存在一个Router实例，所有路由相关组件（Routes、Route、Link、useNavigate等）都必须在该Router的上下文范围内使用。
• 禁止在嵌套组件中重复添加Router，否则会破坏路由上下文，引发各类异常。

内容的提问来源于stack exchange，提问作者ahmad amjad