Summary - Layout components

Write a DashboardLayout with header, sidebar and main content.

Summary - Layout components

In this group you learned the layout pattern, the sidebar and header structure, and Outlet usage. The layout writes the frame once; every page shares it.

The sidebar holds links, the header holds the logo and menu. Outlet marks where child routes render. These three tools together build a consistent app skeleton.

In the last step you will combine the three pieces into one layout.

Exercise Full layout

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

Show example solution

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

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

export default AppLayout;

Test yourself

Which renders the child route?
- Outlet
- Header
- Footer
- Sidebar
Show answer

Outlet — Outlet renders the child route.
Summary match

Layout

Frame
Sidebar

Left menu
Outlet

Child route
header

Top area

Next lesson: What is an error boundary?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies