URL parametreleri

:id gibi parametreleri useParams ile okumayı öğrenirsin.

URL parametreleri

React Router'da bir yolun parçasını parametre olarak işaretleyebilirsin. /users/:id yolundaki :id bir parametredir; id değerini useParams hook'u ile okursun.

Parametre adı serbesttir: :slug, :tab veya :kategori yazabilirsin. Birden fazla parametre de mümkündür: /blog/:year/:slug.

Parametre her zaman dize olarak gelir; sayı gerekiyorsa Number(id) ile çevirirsin. Bu dersin sonunda bir ürün detay sayfası yazacaksın.

Birden fazla parametre

Birden fazla parametre tanımlamak kolaydır: /blog/:year/:slug. Bileşen içinde ikisini de aynı nesneden çıkarırsın: const { year, slug } = useParams();.

Parametreler opsiyonel değildir; yolda yoksa eşleşmez. Opsiyonel segment için ? kullanabilirsin: /files/:name?. Bu durumda name tanımsız gelebilir.

Sıralama önemlidir: /blog/:year/:slug ile /blog/:slug/:year farklı eşleşir.

Uygulama Kullanıcı detayı

Aşağıdaki iskeleti tamamla. UserDetail bileşeni yaz; useParams ile id al ve <p>Kullanıcı {id}</p> döndür. Dışa aktar.

Örnek çözümü göster

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

function UserDetail() {
  const { id } = useParams();
  return <p>Kullanıcı {id}</p>;
}

export default UserDetail;

Kendini test et

useParams ne döndürür?
- Bir dizi
- Bir nesne
- Bir dize
- Bir sayı
Cevabı göster

Bir nesne — useParams bir nesne döndürür; anahtarlar parametre adlarıdır.

Parametre okuma

const { id } = ____;

Cevabı göster

const { id } = useParams();

URL parametreleri: kavramları eşleştir

useParams

Parametre okur
:id

Parametre işareti
Number(id)

Sayıya çevirir
:name?

Opsiyonel segment

Sıradaki ders: İç içe rotalar

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler