Nested Routes
Why Nest Routes
Many apps have a persistent layout (like a dashboard with a sidebar) where only the inner content changes between pages. Nested routes let you declare that shared layout once as a parent route, with each specific page as a child route rendered inside it.
Note: A dashboard with /dashboard/profile and /dashboard/settings sharing one sidebar is the classic nested-route use case.
Warning: Without nesting, you'd have to manually re-render the sidebar layout inside every single page component.
Example: Why Nest Routes
// Run in your local React project (npm install required)
import { Routes, Route, Outlet } from 'react-router-dom';
function DashboardLayout() {
return <div><h2>Dashboard</h2><Outlet /></div>;
}
function Profile() { return <p>Profile page</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route path="profile" element={<Profile />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
How Child Paths Are Relative
A child route's path is automatically joined to its parent's path. A child declared as path=profile under a parent at '/dashboard' actually matches the full URL '/dashboard/profile' — you don't repeat the parent's path in the child.
Note: Leaving a child's path empty (path='' or using the index prop) makes it the default child shown at the parent's own path.
Warning: Writing the child's path as '/dashboard/profile' (with the parent's segment repeated) creates an unintended absolute path instead of a relative one.
Example: How Child Paths Are Relative
// Run in your local React project (npm install required)
import { Routes, Route, Outlet } from 'react-router-dom';
function DashboardLayout() { return <div><h2>Dashboard</h2><Outlet /></div>; }
function Overview() { return <p>Overview (default)</p>; }
function Settings() { return <p>Settings</p>; }
function AppRoutes() {
return (
<Routes>
<Route path="/dashboard" element={<DashboardLayout />}>
<Route index element={<Overview />} />
<Route path="settings" element={<Settings />} />
</Route>
</Routes>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
Rendering Children with Outlet
The parent route's element must include an <Outlet /> component somewhere in its JSX — this is the placeholder where React Router injects whichever child route currently matches the URL. Without it, child routes would match successfully but have nowhere to actually appear on screen.
Note: Place <Outlet /> exactly where you want the changing page content to appear within your shared layout.
Warning: Forgetting <Outlet /> in the parent's element means child routes never visually render, even though the URL matches correctly.
Example: Rendering Children with Outlet
// Run in your local React project (npm install required)
import { Outlet } from 'react-router-dom';
function DashboardLayout() {
return (
<div>
<nav>Sidebar</nav>
<main><Outlet /></main>
</div>
);
}⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.
- Forgetting to render <Outlet /> in the parent route's element, so child routes have nowhere to appear.
- Nesting <Route> elements without realizing child paths are relative to the parent by default.
- Duplicating the parent layout's JSX inside every child instead of sharing it via nesting.
- Nested routes let a Route render inside another Route's layout, sharing common UI like a sidebar.
- Child <Route> elements are declared inside a parent <Route>, forming a tree.
- The parent's element must include <Outlet /> to show whichever child route currently matches.
- Child route paths are relative to their parent's path by default.
Requires npm install react-router-dom (v6 nested-route syntax shown) — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: