Liste ve detay
- React kursu
- Orta seviye
- Ders 47/80
- 5 dk
Ürün listesi ve detay sayfalarını yazarsın.
Liste ve detay
Üçüncü ders ürün listesi ve detay sayfalarını ekler. Liste bir dizi ürünü bağlantılarla çizer; detay useParams ile id okur ve ilgili ürünü gösterir.
Liste öğesinde Link bileşeni to özniteliği ile detay sayfasına bağlantı verir. Detay bileşeni ise useParams ile URL'den id'yi alır.
Detay sayfası ürün bulunamazsa nazik bir mesaj gösterir; bu, hatalı bağlantıyı kullanıcıya bildirir.
Detay sayfası
Detay sayfası useParams ile URL parametresini okur ve ilgili ürünü bulur. Örnek: const { id } = useParams(); ile id alır, ürünler dizisinde filtreler.
Ürün bulunamazsa 'bulunamadı' mesajı göstermek iyi bir uygulamadır. Bu, hatalı bağlantıyı kullanıcıya nazikçe bildirir.
Bu desen, liste ve detay sayfaları arasında tutarlı bir geçiş sağlar; kullanıcı yolu elle yazsa bile doğru içeriğe ulaşır.
Uygulama Ürün listesi
Aşağıdaki iskeleti tamamla. ProductList bileşeni yaz; { products } alsın, ul içinde products.map ile her ürün için bir <li><Link to={`/product/${p.id}`}>{p.name}</Link></li> çiz. Dışa aktar.
Başlangıç kodu
import { Link } from "react-router-dom";
// ProductList bileşenini buraya yazÖrnek çözüm
import { Link } from "react-router-dom";
function ProductList({ products }) {
return (
<ul>
{products.map((p) => (
<li key={p.id}><Link to={`/product/${p.id}`}>{p.name}</Link></li>
))}
</ul>
);
}
export default ProductList;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Liste detaya nasıl bağlanır?
- <Navigate>
- <a href>
- <Route>
- <Link to> Doğru cevap
Açıklama: Link to ile detaya giden bağlantı verilir.
2 Link kullanımı
import { Link } from "react-router-dom";
<li key={p.id}><____ to={`/product/${p.id}`}>{p.name}</Link></li>import { Link } from "react-router-dom";
<li key={p.id}><Link to={`/product/${p.id}`}>{p.name}</Link></li>Açıklama: Link to ile detaya gider.
3 Liste ve detay: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
Link |
Bağlantı verir |
useParams |
id okur |
to={`/product/${id}`} |
Detay yolu |
products.find |
Ürünü bulur |