Routingintermediate
Nested Routes and Layouts
Learn how nested route definitions let a shared layout render once while only the inner content changes as sub-routes change.
Nested routes let you express a URL hierarchy (like /dashboard, /dashboard/settings, /dashboard/billing) as nested <Route> elements, where a parent route renders a shared layout (navigation, sidebar, header) once, and only the matched child route's content swaps in and out inside that layout via an <Outlet /> placeholder.
Nested routes are like a building with one shared lobby and elevator bank (the layout) serving many different floors (child routes) — walking to a different floor doesn't require rebuilding the lobby each time, you simply arrive at a different room while the shared entryway stays exactly as it was.
Key Concepts
1
This avoids re-rendering (and re-mounting) the shared layout every time the user navigates between sibling sub-routes, since the parent layout component stays mounted across those navigations — only the <Outlet />'s content changes to match the currently active child route. This is both a performance win and a UX win: persistent UI (like a sidebar's scroll position or an open dropdown) survives navigation between nested views.
<Outlet />
2
The parent route's element renders whatever layout markup it wants, and places <Outlet /> at the exact spot where the matched child route's element should appear — conceptually similar to the children prop, but driven by which child <Route> currently matches the URL rather than by what a parent explicitly passed as JSX.
element<Outlet />children<Route>
3
Interviewers ask candidates to design a nested route structure for a dashboard-style app and to explain specifically why <Outlet /> avoids remounting the shared layout on every sub-navigation, testing understanding of how the parent layout component's fiber persists across route changes within a shared parent shell.
<Outlet />