Lazy Loading Routes

Pages are the natural place to split an application, because a user looks at one page at a time. Acme Admin has three pages: Home, Reports and Settings. A visitor who opens Home should not have to download the code for the other two. React Router, which React Fundamentals introduced, supports two ways of doing this: lazy components inside Routes, and a lazy property on the route itself.

Lazy pages with Routes

The first way combines what the previous lessons taught. Each page becomes a lazy component, and a Suspense boundary shows a fallback while a page's chunk downloads