Layout with Outlet
- React course
- Intermediate
- Lesson 51/80
- 4 min
Learn to use a shared layout with React Router.
Layout with Outlet
Outlet marks where React Router renders child routes. You place an Outlet tag inside the layout; the router renders the matched child there.
This is cleaner than passing the children prop manually. The layout does not know which child to render; the router matches automatically.
Multiple Outlets are also possible; useful for named views. But for the common case a single Outlet is enough.
Multiple child routes
A layout can support multiple child routes. For example, a Dashboard layout may have stats, settings and users children; each renders at the Outlet.
Child routes nest inside the parent. The path prefix is joined automatically: stats becomes /dashboard/stats.
This pattern keeps large panels organized; each section lives in its own component.
Practice Dashboard layout
Complete the skeleton below. Write a Dashboard component; return a div containing <Sidebar /> and <Outlet />. 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>
<Sidebar />
<Outlet />
</div>
);
}
export default Dashboard;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does Outlet do?
- Renk verir
- State tutar
- Fetches data
- Renders the child route Correct answer
Explanation: Outlet marks where the matched child route renders.
2 Outlet element
function Layout() {
return <div><Sidebar /><____ /></div>;
}function Layout() {
return <div><Sidebar /><Outlet /></div>;
}Explanation: Outlet renders the child route.
3 Layout with Outlet: match the terms
| Term | Meaning |
|---|---|
Outlet |
Child route position |
Dashboard |
Parent layout |
stats |
Child path |
Sidebar |
Left menu |