Layout deseni

children ile sayfa iskeleti kuran bileşenler yazmayı öğrenirsin.

Layout deseni

Layout deseni, uygulamanın çerçevesini bir kez yazıp her sayfada yeniden kullanmayı sağlar. Başlık, kenar çubuğu ve alt bilgi layout içinde tanımlanır; sayfa içeriği ayrı bileşenlerde çizilir.

Bu desen tekrarı azaltır: her sayfada aynı başlığı kopyalamazsın. Ayrıca tutarlılık sağlar: çerçeve bir yerde değişirse her sayfa otomatik güncellenir.

React Router'da layout, Outlet ile alt rotaları içine alır; her alt rota Outlet konumunda çizilir.

Outlet ile router layout

React Router kullanıyorsan children yerine Outlet kullanırsın. Outlet, eşleşen alt rotanın çizileceği konumu işaretler.

Bu, layout bileşeninin hangi alt rotayı çizeceğini bilmek zorunda kalmamasını sağlar; router otomatik eşleştirir. Layout yalnızca çerçeveyi sağlar.

Böylece layout ve içerik birbirinden bağımsız gelişir; yeni bir sayfa eklemek için layout'u değiştirmezsin.

Uygulama Layout bileşeni

Aşağıdaki iskeleti tamamla. Layout bileşeni yaz; <header>, <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 Layout() {
  return (
    <div>
      <header>Başlık</header>
      <Outlet />
      <footer>Alt bilgi</footer>
    </div>
  );
}

export default Layout;

Kendini test et

Layout'un görevi nedir?
- Renk paleti
- Çerçeveyi paylaşmak
- Veri çekmek
- State tutmak
Cevabı göster

Çerçeveyi paylaşmak — Layout çerçeveyi bir kez yazıp her sayfada paylaşır.

Layout iskeleti

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

Cevabı göster

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

Layout deseni: kavramları eşleştir

Layout

Çerçeve sağlar
Outlet

Alt rota yeri
header

Üst bölge
footer

Alt bölge

Sıradaki ders: Sidebar ve header

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler