İç içe rotalar
- React kursu
- Orta seviye
- Ders 42/80
- 4 dk
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.
Başlangıç kodu
import { Outlet } from "react-router-dom";
// Dashboard bileşenini buraya yazÖrnek çözüm
import { Outlet } from "react-router-dom";
function Dashboard() {
return (
<div>
<nav>Panel</nav>
<Outlet />
</div>
);
}
export default Dashboard;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Alt rota nereye çizilir?
- <Route> içine
- <Link> içine
- <Outlet> konumuna Doğru cevap
- <Switch> içine
Açıklama: Outlet, eşleşen alt rotanın çizileceği yeri belirler.
2 Outlet etiketi
return <div><Sidebar /><____ /></div>;return <div><Sidebar /><Outlet /></div>;Açıklama: <Outlet /> alt rotanın çizileceği yeri belirler.
3 Kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Outlet |
Alt rota yeri |
Route |
Yol tanımı |
/dashboard |
Üst yol |
stats |
Alt yol |