Layout deseni
- React kursu
- Orta seviye
- Ders 49/80
- 4 dk
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.
Başlangıç kodu
import { Outlet } from "react-router-dom";
// Layout bileşenini buraya yazÖrnek çözüm
import { Outlet } from "react-router-dom";
function Layout() {
return (
<div>
<header>Başlık</header>
<Outlet />
<footer>Alt bilgi</footer>
</div>
);
}
export default Layout;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Layout'un görevi nedir?
- Renk paleti
- Çerçeveyi paylaşmak Doğru cevap
- Veri çekmek
- State tutmak
Açıklama: Layout çerçeveyi bir kez yazıp her sayfada paylaşır.
2 Layout iskeleti
function Layout({ children }) {
return <div><header /><main>{____}</main><footer /></div>;
}function Layout({ children }) {
return <div><header /><main>{children}</main><footer /></div>;
}Açıklama: children ile sayfa içeriği layout içine çizilir.
3 Layout deseni: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Layout |
Çerçeve sağlar |
Outlet |
Alt rota yeri |
header |
Üst bölge |
footer |
Alt bölge |