6.4 - Structure on lazy loading routes

[tkapitein]

Hi, I don't want to lazy load child routes separately, I want them to be part of the parent route when that is been loaded lazily. Now when I try to do this, the child routes will be added to my main bundle. How could I structure my router so, that the child routes are bundled with the parent route?

import Child1 from "./child-1";
import Child2 from "./child-2";

const Parent = lazy(() => import("./parent-route"));

export const routes: RouteObject[] = [
  {
    path: "parent",
    element: <Parent />, // Lazyload
    children: [
      { index: true, element: <Child1 />},
      {
        path: "child-2",
        element: <Child2 />
      },
    ],
  },
];

[kiliman]

Perhaps the child routes should be imported directly in the parent route then.

import Child1 from './child-1'
import Child2 from './child-2'

export default function Parent() {
  // parent route
}
// expose child routes on Parent route object
Parent.Child1 = Child1
Parent.Child2 = Child2

const Parent = lazy(() => import("./parent-route"));

export const routes: RouteObject[] = [
  {
    path: "parent",
    element: <Parent />, // Lazyload
    children: [
      { index: true, element: <Parent.Child1 />},
      {
        path: "child-2",
        element: <Parent.Child2 />
      },
    ],
  },
];

[tkapitein]

Hmm, thats interesting. I will try this today. Thank you for your response!

[tkapitein]

I tried your suggested solution, but could not get it to work.

Got this warning for each child component:
react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Pretty sure I'm not mixing default and named exports. The Parent component does work like expected, but the children will each throw this error.

[khodakova]

@tkapitein Hello! Did you find a solution for that problem?

[tkapitein]

We worked around it in the end. We created a way to be able to preload components, and created a hook that could be used to preload those components. It's not ideal, but it fixes our issue for now.

[khodakova]

I have found another temporary solution

const Parent = lazy(() => import(/* webpackChunkName: "Parent" */"./parent-route"));
const Child1 = lazy(() => import(/* webpackChunkName: "Parent" */"./child-1"));
const Child2 = lazy(() => import(/* webpackChunkName: "Parent" */"./child-2"));

export const routes: RouteObject[] = [
  {
    path: "parent",
    element: <Parent />, // Lazyload
    children: [
      { index: true, element: <Child1 />},
      {
        path: "child-2",
        element: <Child2 />
      },
    ],
  },
];

[MeiKatz]

The question is what bundler you are using. In Webpack you define the chunk name and therefore which code snippets are put into a chunk.

lazy() is doing two things: 1st it puts a wrapper around the component. 2nd it loads the default export of a module. Every other export has to be renamed from its export name to default.

Maybe a solution is to create a custom lazy() function (untested, typed on my mobile phone while in the tram):

function customLazy( promise, mapper = {} ) {
  const base = lazy( promise );

  Object.entries( mapper ).forEach(([key, value]) => {
    base[ key ] = lazy( () =>
      promise.then((module) => ({ 
        "default": module[ value ]
      }))
    );
  };

  return base;
}

const LazyParent = customLazy( import("./parent"), {
  "Child1": "Child1",
  "Child2": "Child2",
});

[tkapitein]

Watched the Roadmap Planning session yesterday (https://www.youtube.com/watch?v=4Q1P8T27UBo) and I think #9884 will solve this question in a nicer way. I kind of hope preloading route components will be added as well. In our project we wrote a wrapper around React.lazy so we can preload the route components when we want to.

[MariuzM]

just in case i am using RRv7 pre 1 and it still does not do that.

[YakuBrangJa]

I found this one solution with <Routes location />,
According to documentation, <Routes> will match a set of child routes from the current location. https://reactrouter.com/en/main/components/routes

With this approach, you can decide whether the child routes load lazily or not when the parent route loads.

Here is the working example,

function App() {
  return (
    <Routes>
      <Route path="/">
        <Route path="parent/*" element={<ParentRoute />} /> // 'parent/*' route name convention is necessary  for parent route
      </Route>
    </Routes>
  );
}


function ParentRoute() {
  return (
    <Routes>
      <Route path="child1" element={<Child1 />} />
      <Route path="child2" element={<Child2 />} />
    </Routes>
  );
}

Note: With this approach, you have to specify full path to <NavLink> and <Link> for navigating child routes

<NavLink to="parent/child1" />