React Router路由错误：多<BrowserRouter>及页面跳转失效问题

核心问题定位 #

报错提示“不能在另一个中渲染”，说明你的应用里至少存在两处<BrowserRouter>（或RouterProvider）实例：

• 可能在入口文件（如main.tsx）和App.tsx中都包裹了路由容器
• 某个子组件（比如Header）内部也重复渲染了路由容器

修复步骤 #

1. 全局只保留一个路由根容器 #

找到应用最顶层入口文件（通常是main.tsx/index.tsx），在这里唯一包裹路由容器，App.tsx及所有子组件里不要再添加任何路由容器。

示例（main.tsx）：

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter> {/* 全局唯一的路由容器 */}
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

2. 在App.tsx中正确配置路由规则 #

用<Routes>和<Route>定义页面路由，不要重复嵌套路由容器：

示例（App.tsx）：

import { Routes, Route, Link } from 'react-router-dom';
import Header from './components/Header';
import Underline from './components/Underline';
import Home from './pages/Home';

function App() {
  return (
    <div className="App">
      <Header /> {/* 子组件可直接用<Link>，无需额外路由容器 */}
      <Underline />
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 其他页面路由可在此扩展 */}
      </Routes>
    </div>
  );
}

export default App;

3. 子组件中直接使用Link跳转 #

在Header这类子组件里，直接引入并使用<Link>即可，不需要额外包裹路由容器：

示例（Header.tsx）：

import { Link } from 'react-router-dom';

function Header() {
  return (
    <header>
      <Link to="/">回到首页</Link> {/* 直接跳转到Home页面的路由路径 */}
    </header>
  );
}

export default Header;

4. 若使用createBrowserRouter的适配方案 #

如果用createBrowserRouter+RouterProvider的方式，同样要确保全局只有一个RouterProvider：

示例（main.tsx）：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App';
import Home from './pages/Home';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      { path: '/', element: <Home /> },
      // 其他子路由配置
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} /> {/* 全局唯一的路由提供者 */}
  </React.StrictMode>
);

此时App.tsx用<Outlet>渲染匹配的子路由：

import { Outlet } from 'react-router-dom';
import Header from './components/Header';
import Underline from './components/Underline';

function App() {
  return (
    <div className="App">
      <Header />
      <Underline />
      <Outlet /> {/* 渲染当前匹配的子路由组件 */}
    </div>
  );
}

排查要点 #

• 全局搜索<BrowserRouter>、RouterProvider，确认只有一处实例
• 检查子组件（尤其是全局布局类组件）是否不小心重复引入了路由容器
• 确认react-router-dom版本为v6，v5与v6的路由API差异极大，混用写法会导致异常

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