Layout and router

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.

Exercise 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.

Show example 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;

Test yourself

Where do child routes render?
- Inside <Route>
- Above <Header>
- <Outlet> konumuna
- Below <Footer>
Show answer

<Outlet> konumuna — Outlet marks where the child renders.

Outlet element

function Layout() {
  return <div><header>Mağaza</header><____ /><footer>2025</footer></div>;
}

Show answer

function Layout() {
  return <div><header>Mağaza</header><Outlet /><footer>2025</footer></div>;
}

Layout and router: match the terms

Layout

Parent component
Outlet

Child route slot
path="/"

Parent path
path="products"

Child path

Next lesson: List and detail

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies