lazy support for default exports

[tlindsay42]

I'd like for the lazy feature to support default exports to map to the route element/Component.

I'm currently working around this via promise chaining to map default to Component, but would love for this to be simpler.

Example

      {
        index: true,
        lazy: () => import('./pages/home').then((module) => ({ Component: module.default })),
      },

[ryanflorence]

Assuming you're after giving your components names, here's another option:

function SomeRoute() {}
export { SomeRoute as Component }

[tlindsay42]

Nope, I'm using default exports instead of named, so that won't work.

My workaround is basically the inverse of the typical guidance for making named exports work with React.lazy.

[CGamesPlay]

I'd like to also express support for this. It would remove some of the special behavior from Remix routes by making that behavior native to React Router.

In the mean time, here is a function that will correctly type check your modules on [email protected]:

import React from "react";
import {
  createBrowserRouter,
  RouterProvider,
  Routes,
  Route,
} from "react-router-dom";

function R<T extends { default: React.ComponentType | null }>(
  load: () => Promise<T>
): () => Promise<
  Omit<T, "default"> & { Component: React.ComponentType | null }
> {
  return async () => {
    const { default: Component, ...rest } = await load();
    return { ...rest, Component };
  };
}

const router = createBrowserRouter([
  {
    lazy: R(() => import("./routes/public/_layout")),
    children: [
      { path: "", lazy: R(() => import("./routes/public/_index")), },
    ],
  },
]);

export const App = () => <RouterProvider router={router} />;

[MorningLit]

I've also noted that using the method @tlindsay42 provided, if I were to import that loader function from that export defaulted component's file, it would not actually lazy load the route unless the loader is located in another file.
Not sure if this is me not fully understanding export default's functionality and it's effects or a bug with React Router Dom 🤔