React Router v6嵌套组件中Route Loader失效问题排查

核心原因：子路由未纳入数据路由配置 #

React Router v6 的 Loader 是数据路由专属特性，只有通过 createBrowserRouter 创建并由 RouterProvider 挂载的路由配置，才会触发 Loader。如果你的根路由采用了数据路由模式，但子路由是在组件内通过 <Routes>/<Route> 嵌套定义的，子路由的 Loader 不会被 React Router 识别。

解决步骤 #

1. 统一集中配置所有路由

将根路由和子路由全部纳入 createBrowserRouter 的路由数组中，而非在组件内分散定义：

// index.js
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import App from './App';
import About from './About';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    loader: () => {
      console.log('根路由 Loader 触发');
      return null;
    },
    // 嵌套子路由配置
    children: [
      {
        path: 'about',
        element: <About />,
        loader: () => {
          console.log('About 路由 Loader 触发');
          return null;
        },
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

2. 父路由组件必须包含 <Outlet>

父路由的元素（比如 App 组件）需要渲染 <Outlet> 来承载子路由内容，确保子路由的 Loader 和组件都能正常工作：

// App.js
import { Outlet } from 'react-router-dom';

function App() {
  return (
    <div>
      <h1>根组件内容</h1>
      {/* 子路由组件会渲染在此处 */}
      <Outlet />
    </div>
  );
}

3. 禁止混合路由模式

不要同时使用旧的 <BrowserRouter> + <Routes> 模式和新的 RouterProvider 模式。所有路由逻辑必须统一通过数据路由配置管理。

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