从一个BrowserRouter跳转至另一基础路由时触发更新深度超限警告

问题根源 #

你同时渲染了两个独立的BrowserRouter实例，它们各自维护完全隔离的路由状态：

• 第一个BrowserRouter里的<Navigate to="base-route" />会触发路由跳转；
• 第二个BrowserRouter的basename设为base-route，这会导致路由状态被反复触发更新，形成无限循环，最终抛出「Maximum update depth exceeded」警告。

修复方案 #

React应用中只需要保留一个BrowserRouter实例，所有路由逻辑都在这个实例下统一处理。修改后的代码如下：

export const App = () => {
  return (
    <ErrorBoundary>
      <BrowserRouter basename="">
        <Routes>
          {/* 初始路径重定向到base-route */}
          <Route path="/" element={<Navigate to="base-route" />} />
          {/* 将子Router组件挂载到base-route路径下，*匹配该路径下所有子路由 */}
          <Route path="base-route/*" element={<Router />} />
        </Routes>
      </BrowserRouter>
    </ErrorBoundary>
  );
};

修改说明 #

• 移除了多余的第二个BrowserRouter，避免路由状态冲突；
• 使用<Routes>和<Route>统一管理路由规则，既实现了初始重定向逻辑，又正确挂载了子路由组件。

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