如何渲染子路由并触发React Router父路由loader？

问题场景 #

当前两种路由配置均无法满足需求：

1. 嵌套路由配置下，访问/dashboards/foo时子路由Loader触发，但<Dashboard/>组件不渲染，仅显示父组件<Dashboards/>
2. 非嵌套路由配置下，<Dashboard/>组件可正常渲染，但父路由Loader不会触发

需求：访问/dashboards/foo路径时，同时触发父路由的retrieveWarehouses和子路由的monitorWarehouse Loader，且<Dashboard/>组件正常渲染。

解决方案 #

1. 调整路由结构 #

采用嵌套路由+index子路由的配置，同时确保父路由布局包含<Outlet />作为子组件渲染入口：

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

// 父路由布局组件，负责承载子路由内容
const DashboardsLayout: React.FC = () => {
  return <Outlet />;
};

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <Navigate to={'/dashboards'}/>
    },
    {
      path: '/dashboards',
      element: <DashboardsLayout />,
      loader: () => store.dispatch(retrieveWarehouses()), // 父层级Loader，所有子路由访问时都会触发
      children: [
        {
          index: true, // 匹配/dashboards根路径
          element: <Dashboards/>
        },
        {
          path: ':warehouse', // 匹配/dashboards/:warehouse路径
          element: <Dashboard/>,
          loader: ({ params }) => store.dispatch(monitorWarehouse(params.warehouse))
        }
      ]
    }
  ]
)

2. 组件无需额外修改 #

原<Dashboards/>和<Dashboard/>组件保持现有代码即可：

• 访问/dashboards时，自动渲染<Dashboards/>仓库选择列表
• 访问/dashboards/foo时，自动渲染<Dashboard/>具体仓库页面，同时触发父子路由的Loader

原理说明 #

• React Router中，父路由的Loader会在所有匹配其父路径的子路由被访问时自动执行，因此将父Loader定义在/dashboards层级，可确保访问子路径时同时触发
• <Outlet />是嵌套路由的核心渲染出口，必须在父路由的element中存在，否则子组件无法渲染
• index: true用于匹配父路由的根路径，确保访问/dashboards时显示仓库选择列表

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