Özet - Layout bileşenleri

Header, sidebar ve ana içerikten oluşan bir DashboardLayout yazarsın.

Özet - Layout bileşenleri

Bu grupta layout desenini, sidebar ve header yapısını ve Outlet kullanımını öğrendin. Layout çerçeveyi bir kez yazar; her sayfa çerçeveyi paylaşır.

Sidebar bağlantı listesi, header logo ve menü taşır. Outlet ise alt rotaların çizileceği konumu belirler. Bu üç araç birlikte tutarlı bir uygulama iskeleti kurar.

Son adımda üç parçayı tek bir layout'ta birleştireceksin.

Uygulama Tam layout

Aşağıdaki iskeleti tamamla. AppLayout bileşeni yaz; <header>, <Sidebar />, <Outlet /> ve <footer> içeren bir div döndür. Dışa aktar.

Örnek çözümü göster

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;

Kendini test et

Hangisi alt rotayı çizer?
- Outlet
- Header
- Footer
- Sidebar
Cevabı göster

Outlet — Outlet alt rotayı çizer.
Özet eşleştir

Layout

Çerçeve
Sidebar

Sol menü
Outlet

Alt rota
header

Üst bölge

Sıradaki ders: Error boundary nedir?

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler