What they are
Nested routes map a URL hierarchy to a component hierarchy. A parent route renders shared layout and an outlet, and child routes render inside that outlet.
Why nest
- A dashboard parent holds the sidebar and header once.
- Child routes like settings or billing render only the inner panel.
- Shared layout is not re mounted when you move between siblings.
The outlet
The parent declares a placeholder, often called an outlet or slot, where the matched child appears. As the URL deepens, more nested components stack into their parents.
Matching
Given the path dashboard billing, the router matches the dashboard segment to the layout and the billing segment to its child. Each segment contributes one level of UI.
Why it matters
Nesting removes duplicated layout code and preserves expensive parent state, such as a loaded sidebar, while only the inner content changes. It also keeps URLs readable and aligned with the visual structure.
Key idea
Nested routes mirror URL depth in the component tree, rendering children into a parent outlet so shared layout persists across navigations.