Özet - İleri router
- React kursu
- Orta seviye
- Ders 44/80
- 5 dk
Ü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.
Başlangıç kodu
import { useParams, useNavigate } from "react-router-dom";
// ProductDetail bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi hook parametre okur?
- useParams Doğru cevap
- useOutlet
- useRoute
- useNavigate
Açıklama: useParams URL parametrelerini okur.
2 Özet eşleştir
| Kavram | Anlamı |
|---|---|
useParams |
Parametre okur |
Outlet |
Alt rota çizer |
useNavigate |
Programlı gider |
navigate(-1) |
Geri döner |