Best way to batch lazy load multiple routes at the same time?

[corymharper]

In v5 you would do something like this:

// SomeRoute.js
import Index from '.';
import A from './A';
import B from './B';

const SomeRoute = () => (
    <Switch>
        <Route path='/some-route/' exact>
            <Index />
        </Route>
        <Route path='/some-route/a' exact>
            <A />
        </Route>
        <Route path='/some-route/b' exact>
            <B />
        </Route>
    </Switch>
);

// Routes.js
import React from 'react';

const SomeRoute = React.lazy(() => import('./SomeRoute'));

const Routes = () => (
    <Switch>
        <Route path='/some-route/'>
            <SomeRoute />
        </Route>
    </Switch>
);

I'm using the new data routers, and I'm trying to minimize my usage of nested Routes which can be automatically slotted in for the approach I detailed above. I have read this section on one possible implementation, but that's nothing close to a 1:1. Are there any approaches I could use that both minimize my use of nested Routes and don't require me to create a significant new convention in our project?

[brophdawg11]

Right now, data routers require you to define the entire routing tree up front, since we need to know about those routes prior to rendering so we can match and call the appropriate loaders (in order to decouple data fetching from rendering). As you noted you could use <Routes> but that's not the idiomatic approach in RouterProvider since descendant routes defined via <Routes> cannot participate in data-loading.

Eventually we do plan to extend the API so that you can lazily define <RouterProvider> child routes that participate in data-loading, but for now you will need to leverage the convention referenced in the blog post if you wish to put multiple routes in a single file.

[enchance]

Here's the solution I made to batch load several routes.

BatchLazy.tsx

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

// Do not lazy load here
import FooView from "@views/FooView.tsx";
import BarView from "@views/BarView.tsx";


const BatchLazy = () => <Outlet />

// Export them or they'll be stripped off
export {FooView, BarView}
export default BatchLazy

routes.tsx

const BatchLazy = lazy(() => import('@config/routes/BatchLazy.tsx'));
// Lazy load `FooView` and `BarView` only so you can reference them in the routes
// By the time you open it they would have already been loaded by BatchLazy anyway
const FooView = lazy(() => import('@views/FooView.tsx'));
const BarView = lazy(() => import('@views/BarView.tsx'));

export const routes = (isAuth: boolean) => createBrowserRouter([
  {path: '/', element: (
      <Suspense fallback={'Loading...'}>
        <BatchLazy />
      </Suspense>
    ), children: [
      {path: 'foo', Component: FooView},
      {path: 'bar', Component: BarView},
  ]},
]);

It works for me but I sure wish there was a build-in way to do this using v6.