Relative links and outlet context
Look at the generated hrefs: .. climbs to the parent route (projects), skipping two segments because :projectId/tasks is one route. relative="path" climbs one URL segment. The links stay the same after clicking Edit because they are relative to the route they're rendered in, not to the URL.
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
Edit -> /projects/7/tasks/edit
Up one route -> /projects
Up one path segment -> /projects/7
after Edit: /projects/7/tasks/edit | Editing tasks