React Router数据加载器在嵌套子路由中失效，如何正确配置？

问题根源 #

React Router v6.4+ 推出的 Data APIs（包括loader、action等）仅对由createBrowserRouter/createRoutesFromElements构建的根路由树中的路由节点生效。你之前在CountryRoutes组件里用<Routes>/<Route>定义的路由属于"客户端路由"，不属于根路由树的一部分，所以配置的loader不会被React Router识别执行。

正确的路由拆分方式 #

要保留路由拆分的同时让loader生效，不能用组件包裹<Routes>，而是要拆分路由配置片段，直接合并到根路由树中。

方案1：拆分JSX路由片段

修改CountryRoutes.js，导出路由配置而非组件：

import CountryList, { loader as CountryListLoader } from './CountryList';
import Country from './Country';

// 导出路由片段，不是组件
const CountryRoutes = (
  <>
    <Route index element={<CountryList />} loader={CountryListLoader} />
    <Route path=":id" element={<Country />} />
  </>
);

export default CountryRoutes;

然后在App.js的根路由中直接引用该片段：

// 导入路由片段
import CountryRoutes from './pages/country/CountryRoutes';

const router = createBrowserRouter(createRoutesFromElements(
  <Route>
    {/* ... 其他路由 ... */}
    <Route path="/ui/countries/*">
      {/* 直接插入拆分的路由片段 */}
      {CountryRoutes}
    </Route>
    {/* ... 其他路由 ... */}
  </Route>
))

方案2：使用对象式路由配置（更推荐）

如果项目规模较大，用对象式路由配置拆分更清晰：

CountryRoutes.js：

import CountryList, { loader as CountryListLoader } from './CountryList';
import Country from './Country';

export const countryRoutes = [
  {
    index: true,
    element: <CountryList />,
    loader: CountryListLoader
  },
  {
    path: ':id',
    element: <Country />
  }
];

App.js：

import { countryRoutes } from './pages/country/CountryRoutes';

const router = createBrowserRouter([
  {
    // ... 根路由结构 ...
    children: [
      {
        element: <PrivateRoutes />,
        children: [
          {
            element: <SidebarLayout />,
            children: [
              { path: '/ui/', element: <Home /> },
              { path: '/ui/items/*', element: <ItemRoutes /> },
              // 挂载拆分的路由
              {
                path: '/ui/countries/*',
                children: countryRoutes
              },
              // ... 其他路由 ...
            ]
          }
        ]
      },
      // ... 无侧边栏路由 ...
    ]
  }
]);

关键结论 #

• loader必须配置在根路由树的路由节点上，也就是由createBrowserRouter直接管理的路由结构中。
• 组件内的<Routes>/<Route>仅用于客户端导航渲染，不支持Data APIs。拆分路由时要拆分路由配置，而非用组件包裹客户端路由。

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