Nested Route

Problem

Complex layouts with shared navigation, sidebars, or headers require duplicating markup across every route. URL structure doesn’t reflect the visual hierarchy, making it difficult to maintain consistent layouts as the application grows. Each route must manually re-render common UI elements.

Solution

Define routes within routes to model hierarchical UIs where parent layouts wrap child views. This matches URL structure to visual hierarchy and enables shared layouts across related pages.

Example

This example demonstrates nested routes where child routes inherit the parent layout, keeping the dashboard chrome while swapping content areas.

{
  // Parent route defines the shared layout
  path: '/dashboard',
  component: DashboardLayout,
  // Child routes render within the parent layout
  children: [
    // URL: /dashboard/stats - shows Stats inside DashboardLayout
    { path: 'stats', component: Stats },
    // URL: /dashboard/settings - shows Settings inside DashboardLayout
    { path: 'settings', component: Settings }
  ]
}

Benefits

• Eliminates duplicate layout code by sharing parent components across child routes.
• Makes URL structure match visual hierarchy, improving maintainability.
• Enables partial page updates when only child content changes.
• Simplifies layout management for complex multi-level interfaces.

Tradeoffs

• Adds complexity with route nesting that can be hard to visualize.
• Can make deep route hierarchies difficult to navigate and understand.
• May cause performance issues if parent routes re-render on child route changes.
• Requires careful planning to determine appropriate nesting levels.