Nested routes let child pages render inside a parent route's layout. They are useful when several routes share the same navigation, sidebar, header, or page structure. ### Example Problem Suppose a dashboard has these URLs: ```text /dashboard /dashboard/profile /dashboard/settings ``` All three pages should share the same dashboard sidebar. Instead of repeating that layout on every page, you can use nested routes. ### Define Nested Routes ```jsx } > } /> } /> } /> ``` Notice that child paths are relative: ```text parent: dashboard child: profile result: /dashboard/profile ``` ### Render Child Routes with Outlet The parent component needs an `Outlet` where the matching child should appear: ```jsx import { Outlet } from "react-router"; function DashboardLayout() { return (

); } ``` If the URL is: ```text /dashboard/profile ``` the result is conceptually: ```text DashboardLayout ├── Sidebar └── Outlet ↓ Profile ``` ### What Is an Index Route? This route: ```jsx } /> ``` is the default child rendered when the parent URL itself is visited: ```text /dashboard ``` It does not add another URL segment. ### Nested Routes Match UI Hierarchy A useful mental model is: ```text URL hierarchy /dashboard/settings ↓ Component hierarchy DashboardLayout └── Settings ``` ### Layout Routes A route can also provide layout nesting without adding another URL segment. ```jsx }> } /> } /> ``` The layout affects the rendered component structure but does not add an extra path such as `/auth`. ### Common Mistake: Forgetting Outlet You may correctly configure child routes: ```jsx }> } /> ``` but if `Dashboard` does not render: ```jsx ``` there is nowhere for `Settings` to appear. ### Interview-Ready Answer Nested routes represent parent-child URL and UI relationships. Child routes inherit the parent's path and render inside the parent's ``. They are useful for shared layouts such as dashboards. An index route acts as the parent's default child without adding another URL segment.