React Router v6.4中如何为侧边栏实现独立路由？

问题场景 #

之前使用React Router v6的BrowserRouter实现嵌套路由，顶层Layout组件包含静态导航和动态子导航：静态部分路由切换时不能重渲染，动态部分有独立的路由匹配逻辑。现在要改用RouterProvider和createBrowserRouter，同时启用新的loader特性，但不想让静态侧边栏因路由切换重渲染。

原代码如下：

顶层路由 #

<BrowserRouter>
  <Routes> 
    <Route element={<Layout />}> 
      <Route index element={<Dashboard />} />
      <Route path="section-a/part1" element={<SomePage />} />
      <Route path="section-a/part2" element={<AnotherPage />} />
      <Route path="section-b" element={<DifferentPage />} /> 
    </Route> 
  </Routes>
</BrowserRouter>

Layout组件 #

const Layout = () => (
  <>
    <AppBar/>
    <SideBar>
      <StaticNavigation/>
      <DynamicSubnavigation /> 
    </SideBar>
    <Outlet/>
  </>
);

动态子导航组件 #

const DynamicSubnavigation = () => (
  <Routes>
    <Route element={<Layout />}>
      <Route index element={<DashboardSideBar />} />
      <Route path="section-a" element={<SectionASideBar />} />
      <Route path="section-b" element={<SectionBSideBar />} />      
    </Route>
  </Routes>
);

改造方案 #

1. 定义单路由配置对象 #

将所有路由逻辑整合到一个配置中，通过handle字段标记对应路由的动态侧边栏组件，替代原嵌套Routes的逻辑：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Dashboard />,
        handle: { sidebar: <DashboardSideBar /> }
      },
      {
        path: 'section-a',
        handle: { sidebar: <SectionASideBar /> },
        children: [
          { path: 'part1', element: <SomePage /> },
          { path: 'part2', element: <AnotherPage /> }
        ]
      },
      {
        path: 'section-b',
        element: <DifferentPage />,
        handle: { sidebar: <SectionBSideBar /> }
      }
    ]
  }
]);

2. 修改动态子导航组件 #

用useMatches钩子获取当前路由匹配链，找到对应路由的侧边栏组件，无需再嵌套Routes：

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

const DynamicSubnavigation = () => {
  const matches = useMatches();
  // 从路由链中匹配带侧边栏配置的最近路由
  const targetMatch = matches.find(match => match.handle?.sidebar);
  return targetMatch?.handle?.sidebar || null;
};

3. 替换顶层Router #

把原BrowserRouter替换为RouterProvider：

const App = () => {
  return <RouterProvider router={router} />;
};

关键细节 #

• 静态导航不重渲染：Layout作为顶层路由的element，仅在应用初始化时渲染一次，子路由切换只会更新Outlet内容，StaticNavigation不受影响。
• 支持loader特性：可直接在路由配置中添加loader函数，比如给section-a/part1路由加数据加载逻辑：

  {
    path: 'section-a/part1',
    element: <SomePage />,
    loader: async () => {
      const res = await fetch('/api/section-a/part1');
      return res.json();
    }
  }
  

• 动态侧边栏匹配：通过useMatches实现的路由匹配逻辑，完全替代原嵌套Routes的功能，符合RouterProvider单路由实例的要求。

内容的提问来源于stack exchange，提问作者Vlďa Čajka