Outlet ile layout
- React kursu
- Orta seviye
- Ders 51/80
- 4 dk
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.
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>
<Sidebar />
<Outlet />
</div>
);
}
export default Dashboard;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Outlet ne işe yarar?
- Renk verir
- State tutar
- Veri çeker
- Alt rotayı çizer Doğru cevap
Açıklama: Outlet eşleşen alt rotanın çizileceği yeri belirler.
2 Outlet etiketi
function Layout() {
return <div><Sidebar /><____ /></div>;
}function Layout() {
return <div><Sidebar /><Outlet /></div>;
}Açıklama: Outlet alt rotayı çizer.
3 Outlet ile layout: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Outlet |
Alt rota konumu |
Dashboard |
Üst layout |
stats |
Alt yol |
Sidebar |
Sol menü |