Reactjs 如何渲染子路径并触发react 路由父加载器

我有一台路由:

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <Navigate to={'/dashboards'}/>
    },
    {
      path: '/dashboards',
      element: <Dashboards/>,
      loader: () => store.dispatch(retrieveWarehouses()),
      children: [
        {
          path: ':warehouse',
          element: <Dashboard/>,
          loader: ({ params }) => store.dispatch(monitorWarehouse(params.warehouse))
        }
      ]
    }
  ]
)

按原样定义，不呈现<Dashboard/>组件，仅呈现其父仪表板列表(Dashboards，请注意复数).然而，仍然触发子Dashboard的加载器.

如果我不使用嵌套路由:

const router = createBrowserRouter(
  [
    {
      path: '/',
      element: <Navigate to={'/dashboards'}/>
    },
    {
      path: '/dashboards',
      element: <Dashboards/>,
      loader: () => store.dispatch(retrieveWarehouses()),
    },
    {
      path: '/dashboards/:warehouse',
      element: <Dashboard/>,
      loader: ({ params }) => store.dispatch(monitorWarehouse(params.warehouse))
    }
  ]
)

子组件Dashboard被正确地呈现，但是父组件的加载器不被触发.

Here are the components:个

Dashboards个

const Dashboards: React.FC<any> = () => {
  const {
    warehouses,
    loading
  } = useAppSelector(selectWarehouseListState)

  if (loading) {
    return (
      <div className={'warehouse-list'}>
        <h1>Select warehouse</h1>
        <Spinner/>
      </div>
    )
  }

  return (
    <div className={'warehouse-list'}>
      <h1>Select warehouse</h1>
      {
        warehouses.map((wh: Warehouse) => (
          <NavLink to={`/dashboards/${wh.name}`} key={wh.name}>
            <div className={'selectable-warehouse container'}>
              {wh.name}
            </div>
          </NavLink>
        ))
      }
    </div>
  )
}

Dashboard个

const Dashboard: React.FC<any> = () => {
  const { loading } = useAppSelector(selectWarehouseState)
  const { warehouse } = useParams()
  const dispatch = useAppDispatch()

  useEffect(() => {
    return () => {
      dispatch(stopMonitorWarehouse(warehouse))
    }
  }, [dispatch])

  if (loading) {
    return (
      <div className={'dashboard loading shrinkable'}>
        <div className={'header'}>
          <NavLink to={'/dashboards'} className={'nav-back'}>
            <ArrowBack/>
          </NavLink>
          <div className={'selected-warehouse-name'}>{warehouse}</div>
        </div>
        <div className={'status connecting'}>status: connecting</div>
        <Spinner/>
      </div>
    )
  }

  return (
    <div className={'dashboard active shrinkable'}>
      <div className={'header'}>
        <NavLink to={'/dashboards'} className={'nav-back'}>
          <ArrowBack/>
        </NavLink>
        <div className={'selected-warehouse-name'}>{warehouse}</div>
      </div>
      <div className={'status connected'}>status: connected</div>
      <div className={'logs-metrics'}>
        <Logs/>
      </div>
    </div>
  )
}

如何访问/dashboards/foo并同时触发两个加载器？