Özet - İleri router

Ürün listesi ve detay sayfaları olan iç içe rotalı bir yapı kurarsın.

Özet - İleri router

Bu grupta URL parametrelerini, iç içe rotaları ve programlı yönlendirmeyi öğrendin. useParams parametre okur, Outlet iç içe rotayı çizer, useNavigate programlı yönlendirme yapar.

Bu üç araç birlikte karmaşık uygulama yapıları kurar: detay sayfaları, dashboard panelleri, çok adımlı formlar. Son adımda hepsini bir örnekte birleştireceksin.

Uygulama Ürün detayı

Aşağıdaki iskeleti tamamla. ProductDetail bileşeni yaz; useParams ile slug al, bir <h1>{slug}</h1> ve <button onClick={() => navigate(-1)}>Geri</button> döndür. useNavigate ile navigate al. Dışa aktar.

Örnek çözümü göster

import { useParams, useNavigate } from "react-router-dom";

function ProductDetail() {
  const { slug } = useParams();
  const navigate = useNavigate();
  return (
    <div>
      <h1>{slug}</h1>
      <button onClick={() => navigate(-1)}>Geri</button>
    </div>
  );
}

export default ProductDetail;

Kendini test et

Hangi hook parametre okur?
- useParams
- useOutlet
- useRoute
- useNavigate
Cevabı göster

useParams — useParams URL parametrelerini okur.
Özet eşleştir

useParams

Parametre okur
Outlet

Alt rota çizer
useNavigate

Programlı gider
navigate(-1)

Geri döner

Sıradaki ders: Proje: Çok sayfalı uygulama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler