The layout pattern

Learn to write components that build a page skeleton with children.

Layout pattern

The layout pattern lets you write the app frame once and reuse it on every page. Header, sidebar and footer live inside the layout; page content is rendered in separate components.

This reduces repetition: you do not copy the same header into every page. It also enforces consistency: changing the frame in one place updates every page automatically.

In React Router, the layout wraps child routes with Outlet; each child renders at the Outlet location.

Router layout with Outlet

If you use React Router, you use Outlet instead of children. Outlet marks where the matched child route renders.

This means the layout does not need to know which child to render; the router matches automatically. The layout only provides the frame.

Layout and content evolve independently; adding a new page does not require changing the layout.

Exercise Layout component

Complete the skeleton below. Write a Layout component; return a div containing <header>, <Outlet /> and <footer>. Export it.

Show example solution

import { Outlet } from "react-router-dom";

function Layout() {
  return (
    <div>
      <header>Başlık</header>
      <Outlet />
      <footer>Alt bilgi</footer>
    </div>
  );
}

export default Layout;

Test yourself

What is the layout's job?
- Renk paleti
- Sharing the layout
- Fetching data
- State tutmak
Show answer

Sharing the layout — Layout writes the frame once and shares it across pages.

Layout skeleton

function Layout({ children }) {
  return <div><header /><main>{____}</main><footer /></div>;
}

Show answer

function Layout({ children }) {
  return <div><header /><main>{children}</main><footer /></div>;
}

The layout pattern: match the terms

Layout

Provides the frame
Outlet

Child route slot
header

Top area
footer

Bottom area

Next lesson: Sidebar and header

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies