Define a three-route app with react-router-dom v6: /, /about, and /users/:id. Render each route inside a shared <Layout>.

Convert the heavy <Dashboard> import to a lazy import and render it behind <Suspense fallback={...}>. What does the user actually see during the load?

What is the practical difference between route-based code splitting and component-based code splitting? When does each one win?

Read this route table and answer: with three routes lazy-loaded, what does the user pay for navigating from / to /reports for the first time, and how do you avoid a blank screen?