Lazy Loaded Route Modules

[brophdawg11]

Add support for a route.lazy method to lazily load the "meat" of a route while still providing the "matching" information up front. This injects the lazy() call into the normal loading/submitting navigation flow internal to the router so we can provide first-class support for route-level code splitting. This ends up being cleaner/easier than doing it in user-land for a few reasons:

• We can load at a more specific spot internal to the router
• We can access the navigation AbortSignal in case the lazy() call gets interrupted
• We can also load once and update the route so subsequent navigations don't have a repeated lazy() call
• We don't have issue with knowing whether or not an errorElement exists since we will have updated the route prior to updating any UI state

Example

let routes = [{
  path: '/',
  lazy: () => import('./root.tsx')
}, {
  path: '/about',
  lazy: () => import('./about.tsx')
}];

Todo

• Unit tests
• Built-in Remix-style export mapping (default export -> element, ErrorBoundary -> errorElement)
  • For clarity this is going to be left to user-land

Reference Links

• Roadmap: https://github.com/orgs/remix-run/projects/5?pane=issue&itemId=17881951
• Proposal: Remix Route Modules in React Router #9826
• Initial approach: f3e4289
• User-land POC implementation: feat(react-router-dom): add createModuleRoutes utility function #9830

[changeset-bot]

🦋 Changeset detected

Latest commit: 2560422

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
react-router	Minor
react-router-dom	Minor
@remix-run/router	Minor
react-router-dom-v5-compat	Minor
react-router-native	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[brophdawg11]

This is released in react-router-dom@6.9.0-pre.0 if anyone is keeping an eye on this and wants to give it a test spin 😉

[davbrito]

How do you put a Suspense fallback for a lazy loaded route component?

[brophdawg11]

That's not quite the "idiomatic" use case since the idea of lazy is to load the route definition before the render step, so you'd manage pending UI via useNavigation. However, if you want to route immediately and use Suspense you'd have to then also leverage defer so your data is Suspense-enabled. Here's a quick POC: https://codesandbox.io/s/route-lazy-suspense-ooru6p?file=/src/index.js