React Router报错：应用中不可存在多个Router的问题排查求助

你的代码存在循环渲染+Router嵌套的问题：

• Menu组件用<BrowserRouter>包裹路由，且路由指向的element是<Portfolio />
• 而Portfolio组件又渲染了<Menu />
  这会触发无限循环渲染：Menu → Portfolio → Menu → Portfolio... 最终导致多个<BrowserRouter>嵌套，触发报错。

解决方案步骤 #

1. 将<BrowserRouter>移到应用最顶层（如index.js）

把Router放在整个应用的最外层，避免在子组件中重复包裹：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import Portfolio from './pages/Portfolio';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Portfolio />
    </BrowserRouter>
  </React.StrictMode>
);

2. 重构Menu组件，移除内部的<BrowserRouter>

Menu组件只需负责路由规则或导航元素，不需要自己包裹Router：

import React from 'react';
import { Routes, Route } from "react-router-dom";
import Portfolio from '../pages/Portfolio';
// 可在此添加其他页面路由
// import About from '../pages/About';

function Menu() {
  return (
    <Routes>
      <Route path="/" element={<Portfolio />} />
      {/* <Route path="/about" element={<About />} /> */}
    </Routes>
  );
};

export default Menu;

3. 调整Portfolio组件的结构（可选）

如果Menu是导航栏组件，可修改为仅渲染导航链接，避免和路由定义混淆：

// 导航型Menu组件示例
import React from 'react';
import { Link } from "react-router-dom";

function Menu() {
  return (
    <nav className="menu-nav">
      <Link to="/">首页</Link>
      <Link to="/about">关于我</Link>
    </nav>
  );
};

export default Menu;

内容的提问来源于stack exchange，提问作者Angel Acedo