React.lazy + Nested routes = waterfall?

[vjee]

Hi, I am sure this question has been answered somewhere sometime before but I can't really find what I'm looking for.

Given the current path is /root, is it a given that with the following setup, ./root/index.jsx is only loaded after ./root.jsx has been loaded?
Is it possible to get them to load simultaneously?
It seems to me that react-router is/can be perfectly aware of the fact that ./root/index.jsx will be needed when we hit /root in the browser (assuming we render an Outlet that is).

Any info/help would be very much appreciated!
Thank you for your time.

const routes = [
  {
    path: "root",
    element: lazy(() => import("./root.jsx")),
    children: [
      {
        path: "",
        element: lazy(() => import("./root/index.jsx")),
      },
    ],
  },
];

function App() {
  const element = useRoutes(routes);
  return element;
}

// root.jsx
export default function Root() {
  return (
    <div>
      You're at /root
      <Outlet />
    </div>
  );
}

// root/index.jsx
export default function RootIndex() {
  return "Hi!";
}

[vkhitev]

Hey @vjee! Did you find an adequate solution for that?

[vjee]

If you define your routes via a config like the example in the question then I think it's possible to do something like this:

/*

Example or `routes`
const routes = [
  {
    path: "root",
    element: lazy(() => import("./root.jsx")),
    loader: () => import("./root.jsx"),
    children: [
      {
        path: "",
        element: lazy(() => import("./root/index.jsx")),
        loader: () => import("./root/index.jsx"),
      },
    ],
  },
];

*/

function EagerLoader({ routes }) {
  const location = useLocation();

  useEffect(() => {
    const matches = matchRoutes(routes, location) || [];

    matches.forEach((match) => {
      const route = match.route;
      if (route.loader) route.loader();
    });
  }, [location]);

  return null;
}

function App() {
  const element = useRoutes(routes);

  return (
    <>
      {element}
      <EagerLoader routes={routes} />
    </>
  );
}

This should call the dynamic import of child components, even if they're not yet needed. By the time React wants to render them, they are already finished loading or started loading already.

Note that the routes have an extra loader property which is just a function returning a dynamic import. It think it is possible to get this function from the element property but then you're dealing with React internals. E.g. route.element._payload._result.