İç içe rotalar

Outlet ile iç içe rotaları yönetmeyi öğrenirsin.

İç içe rotalar

İç içe rotalar, bir rotanın altında başka rotalar tanımlamanı sağlar. /dashboard/stats ve /dashboard/settings yollarını tek bir dashboard çatısı altında toplar.

Bunun için Route bileşenini iç içe yerleştirir ve üst bileşende Outlet kullanırsın. Outlet, eşleşen alt rotanın çizileceği yeri işaretler.

Bu desen, ortak layout (kenar çubuğu, başlık) paylaşan sayfalarda çok yaygındır. Layout bir kez yazılır, her alt sayfa için tekrar etmez.

Route yapısı

İç içe rotaları tanımlarken Route bileşeninin içine başka Route bileşenleri koyarsın. Üst rota kendi bileşenini çizer; o bileşenin JSX'inde Outlet olan yerde alt rota çizilir.

Örnek: /dashboard yolu Dashboard bileşenini, /dashboard/stats alt yolu Stats bileşenini Dashboard içinde çizer. Üst bileşende Outlet olan yerde alt rota belirir.

Üst bileşen genellikle layout içerir; alt bileşen içerik bölümünü doldurur.

Uygulama Dashboard layout

Aşağıdaki iskeleti tamamla. Dashboard bileşeni yaz; nav içinde bir başlık ve alt rotanın çizileceği <Outlet /> döndür. Dışa aktar.

Örnek çözümü göster

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

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

export default Dashboard;

Kendini test et

Alt rota nereye çizilir?
- <Route> içine
- <Link> içine
- <Outlet> konumuna
- <Switch> içine
Cevabı göster

<Outlet> konumuna — Outlet, eşleşen alt rotanın çizileceği yeri belirler.

Outlet etiketi

return <div><Sidebar /><____ /></div>;

Cevabı göster

return <div><Sidebar /><Outlet /></div>;

Kavramları eşleştir

Outlet

Alt rota yeri
Route

Yol tanımı
/dashboard

Üst yol
stats

Alt yol

Sıradaki ders: Programlı yönlendirme

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler