URL parametreleri
- React kursu
- Orta seviye
- Ders 41/80
- 4 dk
: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.
Başlangıç kodu
import { useParams } from "react-router-dom";
// UserDetail bileşenini buraya yazÖrnek çözüm
import { useParams } from "react-router-dom";
function UserDetail() {
const { id } = useParams();
return <p>Kullanıcı {id}</p>;
}
export default UserDetail;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useParams ne döndürür?
- Bir dizi
- Bir nesne Doğru cevap
- Bir dize
- Bir sayı
Açıklama: useParams bir nesne döndürür; anahtarlar parametre adlarıdır.
2 Parametre okuma
const { id } = ____;const { id } = useParams();Açıklama: useParams() çağrısı parametre nesnesini döndürür.
3 URL parametreleri: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useParams |
Parametre okur |
:id |
Parametre işareti |
Number(id) |
Sayıya çevirir |
:name? |
Opsiyonel segment |