BitWithBite
React · Quick Reference
Lesson 13 — Nested Routes Cheat Sheet
In one line: Outlet lets a layout wrap multiple child pages, rendering only the changing part.
Key Ideas
1Outlet. Placeholder for the active child route.
2Nesting. Child <Route>s inside a parent Route.
3index route. Matches the parent path exactly.
Example
function DashboardLayout() {
return <div><Sidebar/><main><Outlet/></main></div>;
}
<Route path="/dashboard" element={<DashboardLayout/>}>
<Route index element={<Home/>} />
<Route path="courses" element={<MyCourses/>} />
</Route>