Layout ve router

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.

Örnek çözümü göster

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;

Kendini test et

Alt rotalar nereye çizilir?
- <Route> içine
- <Header> üstüne
- <Outlet> konumuna
- <Footer> altına
Cevabı göster

<Outlet> konumuna — Outlet alt rotanın çizileceği yeri belirler.

Outlet etiketi

function Layout() {
  return <div><header>Mağaza</header><____ /><footer>2025</footer></div>;
}

Cevabı göster

function Layout() {
  return <div><header>Mağaza</header><Outlet /><footer>2025</footer></div>;
}

Layout ve router: kavramları eşleştir

Layout

Üst bileşen
Outlet

Alt rota yeri
path="/"

Üst yol
path="products"

Alt yol

Sıradaki ders: Liste ve detay

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler