Splitting sub routes and loaders

[dimitrisfasoulas]

I'm using react router v6 and I'm wondering how I can keep loaders for subroutes split with lazy. A simple example :

  {
    path: '/',
    element: <Root />,
    children: [
          {
        path: 'jobseeker',
        loader: loaderFunc(),
        children: [
          {
            path: 'dashboard/*',
            lazy: () => import('./DashboardComponent'),
            loader: userProfileLoader(queryClient),
            action: jobSeekerAction(queryClient),
            children: [
              {
                path: 'step1',
                element: <JSDStepOne />,
                loader: someOtherLoader(),
                action: actionFunc()
              },
              {
                path: 'step2',
                element: <JSDStepTwo />,
                loader: yetAnotherLoader(),
                action: actionFunc()
              },
              {
                path: 'step3',
                element: <JSDStepThree />,
                action: actionFunc()
              }
            ]

          }

In the example above I would like to move all the children of dashboard into dashboard component so when I lazy load that component it would load all sub routes as well.

I can achieve that by going to the dashboard component which now uses <Outlet /> and change it to:

            <Routes>
              <Route
                path="step1"
                element={<JSDStepOne />}
                loader={someOtherLoader()}
                action={actionFunc()}
              />
              <Route
                path="step2"
                element={<JSDStepTwo />}
                loader={yetAnotherLoader}
                action={actionFunc()}
              />
              <Route
                path="step3"
                element={<JSDStepThree />}
                action={actionFunc()}
              />
            </Routes>

The problem with the above is that data API's don't work with <Routes> documentation

If you're using a data router like createBrowserRouter it is uncommon to use this component as routes defined as part of a descendant tree cannot leverage the Data APIs available to RouterProvider apps.

Given the above is there a different way I could proceed?

If no options are available, I guess I could stop leveraging the React router to prefetch data before route rendering. In that case, will actions work, or do I need to stop relying on the router for those as well?