Layout and router
- React course
- Intermediate
- Lesson 46/80
- 5 min
Set up the layout component and the route tree.
Layout and router
The second lesson sets up the layout. The Layout component holds the shared header and footer; child routes render via Outlet. This way every page shares the same frame.
The layout route is the parent; /, /products and /product/:id are its children. The whole app runs inside one layout frame.
The Layout component has a header, a footer and an Outlet in between; child routes appear at the Outlet location.
Nested routes
You place child routes inside the layout route. The parent has path="/" and the Layout component in its element; child routes go inside the parent.
Child paths are relative: path="products" is enough; React Router joins it into /products automatically.
Each child route renders its own component; the Layout frame stays fixed, only the Outlet region changes.
Practice Layout and child routes
Complete the skeleton below. Write an App component; in <Routes> put a parent Route with path="/" and element={"{"<Layout />}"}, and inside it a child Route with path="products" and element={"{"<Products />}"}. Export it.
Starter code
import { BrowserRouter, Routes, Route } from "react-router-dom";
// Write the App component hereSample solution
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="products" element={<Products />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Where do child routes render?
- Inside <Route>
- Above <Header>
- <Outlet> konumuna Correct answer
- Below <Footer>
Explanation: Outlet marks where the child renders.
2 Outlet element
function Layout() {
return <div><header>Mağaza</header><____ /><footer>2025</footer></div>;
}function Layout() {
return <div><header>Mağaza</header><Outlet /><footer>2025</footer></div>;
}Explanation: Outlet holds the slot for the child route.
3 Layout and router: match the terms
| Term | Meaning |
|---|---|
Layout |
Parent component |
Outlet |
Child route slot |
path="/" |
Parent path |
path="products" |
Child path |