Nested routes
- React course
- Intermediate
- Lesson 42/80
- 4 min
Learn to manage nested routes with Outlet.
Nested routes
Nested routes let you define routes under another route. Paths like /dashboard/stats and /dashboard/settings sit under a single dashboard umbrella.
To do this, nest Route components and use Outlet in the parent. Outlet marks where the matched child route renders.
This pattern is very common for pages that share a common layout (sidebar, header). The layout is written once, not repeated for each child page.
Route structure
When defining nested routes, you place Route components inside other Route components. The parent route renders its own component; that component's JSX has Outlet where the child renders.
Example: the /dashboard path renders the Dashboard component; the /dashboard/stats child path renders Stats inside Dashboard, at the Outlet location.
The parent usually contains the layout; the child fills the content area.
Practice Dashboard layout
Complete the skeleton below. Write a Dashboard component; return a nav with a heading and an <Outlet /> where the child route renders. Export it.
Starter code
import { Outlet } from "react-router-dom";
// Write the Dashboard component hereSample solution
import { Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<nav>Panel</nav>
<Outlet />
</div>
);
}
export default Dashboard;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where does the child route render?
- Inside <Route>
- Inside <Link>
- <Outlet> konumuna Correct answer
- Inside <Switch>
Explanation: Outlet marks where the matched child route renders.
2 Outlet element
return <div><Sidebar /><____ /></div>;return <div><Sidebar /><Outlet /></div>;Explanation: <Outlet /> marks where the child route renders.
3 Match concepts
| Term | Meaning |
|---|---|
Outlet |
Child route slot |
Route |
Path definition |
/dashboard |
Parent path |
stats |
Child path |