Layout route, nested dashboard, index routes and a 404
The header (layout route) stays on every page. On /dashboard the index route fills the dashboard's outlet. The unknown /oops falls through to *, still inside the site layout.
Nested routes put routes inside routes, so a parent renders the shared frame (header, sidebar, tabs) and an <Outlet /> where the matching child appears; index routes fill the outlet at the parent's own URL, layout routes add a frame without a URL segment, * catches unknown paths, and links inside a route are relative to it.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Build a /settings section with tabs Profile (index) and Security (security), shown inside a settings frame with a heading, plus a top-level not-found page.
Make an AdminLayout layout route that adds a red "Admin" banner to /users and /reports but not to /.
Inside the route orders/:orderId, write links to the order's invoice child, to the orders list, and to /.
Explain it without notes
How do nested routes and <Outlet /> work together?
What is the difference between an index route and a layout route?
How do you handle unknown URLs in React Router?
How are relative links resolved, and what does relative="path" change?
Preview
Console
Nothing logged yet.Expected console output
/ | Home page
/dashboard | Dashboard > Overview: 3 new orders
/dashboard/settings | Dashboard > Settings: dark mode on
/oops | 404: page not found