Özet - Layout bileşenleri
- React kursu
- Orta seviye
- Ders 52/80
- 5 dk
Header, sidebar ve ana içerikten oluşan bir DashboardLayout yazarsın.
Özet - Layout bileşenleri
Bu grupta layout desenini, sidebar ve header yapısını ve Outlet kullanımını öğrendin. Layout çerçeveyi bir kez yazar; her sayfa çerçeveyi paylaşır.
Sidebar bağlantı listesi, header logo ve menü taşır. Outlet ise alt rotaların çizileceği konumu belirler. Bu üç araç birlikte tutarlı bir uygulama iskeleti kurar.
Son adımda üç parçayı tek bir layout'ta birleştireceksin.
Uygulama Tam layout
Aşağıdaki iskeleti tamamla. AppLayout bileşeni yaz; <header>, <Sidebar />, <Outlet /> ve <footer> içeren bir div döndür. Dışa aktar.
Başlangıç kodu
import { Outlet } from "react-router-dom";
// AppLayout bileşenini buraya yazÖrnek çözüm
import { Outlet } from "react-router-dom";
function AppLayout() {
return (
<div>
<header>Başlık</header>
<Sidebar />
<Outlet />
<footer>Alt bilgi</footer>
</div>
);
}
export default AppLayout;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi alt rotayı çizer?
- Outlet Doğru cevap
- Header
- Footer
- Sidebar
Açıklama: Outlet alt rotayı çizer.
2 Özet eşleştir
| Kavram | Anlamı |
|---|---|
Layout |
Çerçeve |
Sidebar |
Sol menü |
Outlet |
Alt rota |
header |
Üst bölge |