React Router：createBrowserRouter对比BrowserRouter及路由创建位置疑问

一、createBrowserRouter 对比 BrowserRouter 的额外优势 #

除了官方提到的数据API支持，它还有这些关键优势：

• 中心化路由配置：用数组结构统一管理所有路由，比嵌套<Route>组件更直观，大型项目里更易维护、更便于批量修改或扩展
• 完整的数据处理生态：配套loader/action的同时，还提供了ErrorBoundary、useRouteError等工具，能在渲染前捕获数据获取错误，避免页面崩溃，实现更优雅的错误处理
• SSR友好设计：路由配置脱离React树后，服务端可以提前解析路由、预取数据，更适配服务端渲染场景，提升首屏加载性能
• 提前校验路由合法性：创建路由时就会检查配置问题（比如重复路径、无效嵌套），提前暴露错误，不像BrowserRouter要等到组件渲染才发现问题

二、理解“outside the React tree” #

React树指的是由createRoot.render渲染出来的所有组件层级。“在React树外创建路由”意思是不要在组件内部调用createBrowserRouter，而是把路由配置和实例创建放在组件定义之外的全局代码中，确保路由实例只会被创建一次，不会随组件重新渲染反复生成新实例。

你当前的实现问题：每次Router组件因currentUser变化重新渲染时，都会调用createBrowserRouter生成新的路由实例，这会导致路由状态重置、产生不必要的性能开销，也违背了数据API“数据获取与渲染解耦”的设计初衷。

三、正确的实现方式 #

1. 抽离静态路由配置 #

创建routes.tsx文件，单独存放路由结构：

import { RouteObject } from 'react-router-dom';
import { AppLayout } from './AppLayout';
import { ReferralDetails } from './ReferralDetails';
import { defaulNewAPIs } from './loaders';

export const routes: RouteObject[] = [
  {
    path: '/:appTypeId?',
    element: <AppLayout />,
    loader: defaulNewAPIs,
    children: [
      {
        index: true,
        element: <ReferralDetails status="new" />,
      },
    ],
  },
];

2. 在React树外创建路由实例 #

修改Main.tsx，把路由实例创建放在组件外部：

import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { GenReMsal, AuthenticatedTemplate } from '@azure/msal-react';
import { routes } from './routes';

// 在React组件之外创建路由实例，全局只执行一次
const router = createBrowserRouter(routes);

const Root = () => {
  return (
    <GenReMsal>
      <React.StrictMode>
        <AuthenticatedTemplate>
          <RouterProvider router={router} />
        </AuthenticatedTemplate>
      </React.StrictMode>
    </GenReMsal>
  );
};

ReactDOM.createRoot(document.getElementById('root')!).render(<Root />);

3. 在组件内部获取动态数据 #

修改AppLayout.tsx，直接通过MSAL的Hook获取用户信息，不需要从外部传递：

import { useMsal } from '@azure/msal-react';
import { Outlet } from 'react-router-dom';

export function AppLayout() {
  const { accounts } = useMsal();
  const currentUser = accounts[0];
  const userInfo = { name: currentUser?.name };

  return (
    <div className="app-layout">
      <nav>欢迎，{userInfo.name}</nav>
      <Outlet />
    </div>
  );
}

这样修改后：

• 路由实例只会创建一次，避免重复创建带来的问题
• 用户信息由组件内部通过Hook获取，路由配置保持静态，符合数据API的设计要求
• 结构更清晰，维护成本更低

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