第一个路由器无条件地渲染Navigate组件，该组件创建渲染循环。在路线上渲染Navigate，例如"/"，所以只有当"/"路径匹配时才被***有条件地***调用。
示例：

export const App = () => {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Navigate to="base-route" replace />} />
        </Routes>
      </BrowserRouter>
      <BrowserRouter basename="base-route">
        <Router />
      </BrowserRouter>
    </ErrorBoundary>
  );
};

请注意，通过这样做，具有"/base-route"路径的第二个路由器将不知道由第一个路由器调度和处理的导航操作，并且不会重新呈现以显示正确的路由内容。您可以在客户端通过一个小的重构来解决这个问题，以额外触发页面重新加载。
示例：

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

const BaseRedirect = ({ to, replace }) => {
  useEffect(() => {
    window.location.reload();
  }, []);

  return <Navigate to={to} replace={replace} />;
};

export const App = () => {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<BaseRedirect to="base-route" replace />} />
        </Routes>
      </BrowserRouter>
      <BrowserRouter basename="base-route">
        <Router />
      </BrowserRouter>
    </ErrorBoundary>
  );
};

如果您希望避免这种客户端页面重新加载，那么您应该将服务器配置为对第一个URL返回301响应以重定向客户端，例如浏览器到第二个URL。