Outlet ile layout

React Router ile paylaşılan layout kullanmayı öğrenirsin.

Outlet ile layout

Outlet, React Router'ın alt rotaları çizdiği konumu işaretler. Layout bileşeni içinde bir Outlet etiketi koyarsın; router eşleşen alt rotayı oraya çizer.

Bu, children prop'unu elle geçirmekten daha temizdir. Layout hangi alt rotanın çizileceğini bilmez; router otomatik eşleştirir.

Birden fazla Outlet de mümkündür; bu, adlandırılmış görünümler için kullanışlıdır. Ancak yaygın durumda tek Outlet yeterlidir.

Çoklu alt rota

Bir layout birden fazla alt rotayı destekleyebilir. Örneğin Dashboard layout'unun altında stats, settings ve users alt rotaları olabilir; her biri Outlet konumunda çizilir.

Alt rotalar üst rotanın içine iç içe yazılır. Yol öneki otomatik birleştirilir: stats yolu /dashboard/stats olur.

Bu desen büyük panelleri düzenli tutar; her bölüm kendi bileşeninde yaşar.

Uygulama Dashboard layout

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

Örnek çözümü göster

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

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

export default Dashboard;

Kendini test et

Outlet ne işe yarar?
- Renk verir
- State tutar
- Veri çeker
- Alt rotayı çizer
Cevabı göster

Alt rotayı çizer — Outlet eşleşen alt rotanın çizileceği yeri belirler.

Outlet etiketi

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

Cevabı göster

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

Outlet ile layout: kavramları eşleştir

Outlet

Alt rota konumu
Dashboard

Üst layout
stats

Alt yol
Sidebar

Sol menü

Sıradaki ders: Özet - Layout bileşenleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler