Liste ve detay

Ü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.

Örnek çözümü göster

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;

Kendini test et

Liste detaya nasıl bağlanır?
- <Navigate>
- <a href>
- <Route>
- <Link to>
Cevabı göster

<Link to> — Link to ile detaya giden bağlantı verilir.

Link kullanımı

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

<li key={p.id}><____ to={`/product/${p.id}`}>{p.name}</Link></li>

Cevabı göster

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

<li key={p.id}><Link to={`/product/${p.id}`}>{p.name}</Link></li>

Liste ve detay: kavramları eşleştir

Link

Bağlantı verir
useParams

id okur
to={`/product/${id}`}

Detay yolu
products.find

Ürünü bulur

Sıradaki ders: Yönlendirme ve 404

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler