Layout ve router
- React kursu
- Orta seviye
- Ders 46/80
- 5 dk
Layout bileşeni ve rota ağacını kurarsın.
Layout ve router
İkinci ders layout'u kurar. Layout bileşeni ortak başlık ve alt bilgiyi içerir; alt rotalar Outlet ile çizilir. Böylece her sayfa aynı çerçeveye sahip olur.
Layout rotası üst rota olur; /, /products ve /product/:id onun alt rotalarıdır. Tüm uygulama tek bir layout çerçevesinde çalışır.
Layout bileşeni içinde başlık, alt bilgi ve aradaki Outlet bulunur; alt rotalar Outlet konumunda belirir.
İç içe rotalar
Layout rotasının içine alt rotaları yerleştirirsin. Üst rota path="/" ve element özniteliğine Layout bileşenini alır; alt rotalar üst rotanın içine yazılır.
Alt rotaların yolunu yazarken üst yolun önekini tekrar etmezsin: path="products" yeterlidir; React Router otomatik olarak /products olarak birleştirir.
Her alt rota kendi bileşenini çizer; Layout çerçevesi sabit kalır, yalnızca Outlet bölgesi değişir.
Uygulama Layout ve alt rotalar
Aşağıdaki iskeleti tamamla. App bileşeni yaz; <Routes> içinde path="/" ve element={"{"<Layout />}"} olan bir üst Route ve onun içinde path="products" ile element={"{"<Products />}"} olan bir alt Route koy. Dışa aktar.
Başlangıç kodu
import { BrowserRouter, Routes, Route } from "react-router-dom";
// App bileşenini buraya yazÖrnek çözüm
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route path="products" element={<Products />} />
</Route>
</Routes>
</BrowserRouter>
);
}
export default App;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Alt rotalar nereye çizilir?
- <Route> içine
- <Header> üstüne
- <Outlet> konumuna Doğru cevap
- <Footer> altına
Açıklama: Outlet alt rotanın çizileceği yeri belirler.
2 Outlet etiketi
function Layout() {
return <div><header>Mağaza</header><____ /><footer>2025</footer></div>;
}function Layout() {
return <div><header>Mağaza</header><Outlet /><footer>2025</footer></div>;
}Açıklama: Outlet alt rotanın çizileceği yeri tutar.
3 Layout ve router: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Layout |
Üst bileşen |
Outlet |
Alt rota yeri |
path="/" |
Üst yol |
path="products" |
Alt yol |