Intermediate

Routing and Code Splitting

Add multi-page navigation with React Router, then split the bundle so each page loads only what it needs. React Router v7's data mode lets a route declare a loader that fetches its data before the route renders, and route.lazy defers importing a route's module until it's actually visited.

~5h

0 / 7 steps

🚀

Intro

Routing is where data fetching and bundle size collide

React Router v7's data mode lets a route declare a loader that fetches its data before the route renders, eliminating the loading-spinner-inside-a-loading-spinner problem of fetching after the component mounts. This project builds a multi-page app with nested routes, loaders, and lazy-loaded route bundles so a user visiting the home page never downloads the code for the admin panel.

🔨

Step 1 — Define routes with a loader

🔨

Step 2 — Read loader data in the route component

🔨

Step 3 — Split each route into its own bundle

🔨

Step 4 — Handle pending and error states at the route level

🎯

Secret Mission

Secret Mission: prefetch on hover

🧹

Wrap Up

Before You Go

Pro

Test what you just learned

Self-testing is one of the best ways to retain new skills. Unlock project quizzes to check your understanding.

0 / 7 complete