Layout with Outlet

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.

Exercise Dashboard layout

Complete the skeleton below. Write a Dashboard component; return a div containing <Sidebar /> and <Outlet />. Export it.

Show example solution

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

function Dashboard() {
  return (
    <div>
      <Sidebar />
      <Outlet />
    </div>
  );
}

export default Dashboard;

Test yourself

What does Outlet do?
- Renk verir
- State tutar
- Fetches data
- Renders the child route
Show answer

Renders the child route — Outlet marks where the matched child route renders.

Outlet element

function Layout() {
  return <div><Sidebar /><____ /></div>;
}

Show answer

function Layout() {
  return <div><Sidebar /><Outlet /></div>;
}

Layout with Outlet: match the terms

Outlet

Child route position
Dashboard

Parent layout
stats

Child path
Sidebar

Left menu

Next lesson: Summary - Layout components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies