Nested Routes
Last updated: 2026-11-02
Nested Routes Nested Routes
Nested routes express a layout plus its child pages as parent and child Route elements: a parent Route contains more Routes, and the parent component draws an Outlet slot where the matched child page is rendered. The classic admin layout - a fixed sidebar with a switching content area - is built entirely from this pattern. Each level keeps its own chrome, so even a deep hierarchy of layouts stays easy to reason about.
| Group | Routing & State Mgmt |
|---|---|
| Kind | Component |
| Since | React Router 6.4 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
import { Routes, Route, Outlet } from 'react-router-dom'
function DashboardLayout() {
return (
<div>
<aside>Sidebar (fixed by the parent)</aside>
<main><Outlet /></main> {/* the child route renders here */}
</div>
)
}
<Route path="dashboard" element={<DashboardLayout />}>
<Route index element={<Overview />} /> {/* the default child page of /dashboard */}
<Route path="team" element={<Team />} /> {/* /dashboard/team */}
</Route>⚙️ Parameters
| path (parent) | The parent path segment; the path of a child Route is appended to it, while a leading / makes it absolute. |
|---|---|
| index | A special marker on a child Route: the default child page rendered when the parent path itself (e.g. /dashboard) has no further segments. |
Returns：Nothing (it is a declarative component). The parent route renders its own element, and the position of the Outlet inside it decides where the child route content appears.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
The outer frame and the title (the parent layout) never change, while the dashed box (the Outlet position) switches child pages as you click - the rendering result of nested parent/child Routes plus Outlet (simulated demo).💡 Key Points
🏷️ More Routing & State
💡 Related Cases
📚 Related Tutorials
❓ FAQ
