Deploying React AppsEntry 5 of 11

The Route `lazy` Property

A modern alternative to Entries 2–4: the route's lazy function imports the page module and returns its Component, loader, and action together.

Notes

Available in React Router v6.4+ data routers.
One import() per route; no lazy(), no separate loader wrapper.
The module exports Component (or a default export mapped to it), loader, and action.
The router loads the code before rendering, alongside loader data, so no <Suspense> is needed. useNavigation() covers the pending state.
Closest match to Angular's loadComponent.

What / Why / When

What: Route-level code splitting built into the router.
Why: Less boilerplate, and code and data load in parallel.
When: New projects using data routers. The course's lazy() approach still works.

Code compare

React

// App.tsx{  path: 'posts',  children: [    {      index: true,      lazy: async () => {        const { default: Component, loader } = await import('./pages/Blog');        return { Component, loader };      },    },    {      path: ':id',      lazy: async () => {        const { default: Component, loader } = await import('./pages/Post');        return { Component, loader };      },    },  ],}

Angular

{ path: 'posts', loadComponent: () => import('./pages/blog.component') } // default export

Quick reference

Approach	React	Angular
Course	`lazy()` + `import().then(m => m.loader())` + `<Suspense>`	—
Modern	Route `lazy: () => import(...)`	`loadComponent` / `loadChildren`