Ek bilgiler
React Router ile Dinamik Ürün Detay Sayfası ve Veri Çekme
Dinamik bir ürün detay sayfası kurgularken ilk çözmemiz gereken mesele, kullanıcının hangi ürünü incelemek istediğini yakalamaktır. Bu noktada React Router'ın useParams kancası imdadımıza yetişiyor; tanımladığımız dinamik rota (product/:productId) üzerinden URL parametresini çekerek hangi ürünün kimliğini (ID) istediğimizi garanti altına alıyoruz. Ürün listeleme kartlarında ilgili görsel veya başlığı Link bileşeniyle dinamik URL yapısına bağladığımızda, kullanıcı doğrudan doğru kimlik bilgisiyle detay rotasına yönlendiriliyor. Böylece her detay sayfası, ihtiyaç duyduğu spesifik verinin ID bilgisine doğrudan ve temiz bir biçimde erişmiş oluyor.
Parametreyi yakaladıktan sonra useEffect ile asenkron API çağrımızı tetikliyoruz. Parametreden gelen ID değerini dependency array'e ekleyip fetch ile tek bir ürünün detay verisini (get single product) çekiyor ve gelen JSON verisini useState ile durum değişkenimize aktarıyoruz. Burada en kritik tuzak, asenkron veri henüz istemciye ulaşmadan bileşenin render edilmeye çalışılmasıdır. Eğer başlangıç state'ini boş bir obje bırakıp optional chaining (?.) veya null kontrolü yapmazsanız arayüz patates olur; bu yüzden veri henüz hazır değilken arayüzü korumak adına null veya koşullu render kontrollerini asla atlamamak gerekir.
Mevcut yapıda her bileşende ayrı ayrı fetch istekleri yazmak, response.json() parse etmek ve hata blokları kurgulamak ilk etapta işimizi görse de sürekli kendimizi tekrar etmemize neden oluyor. İlerleyen aşamalarda bu veri akışını Axios ve merkezi servis katmanlarıyla çok daha derli toplu bir yapıya kavuşturacağız. Şimdi temel ürün detay sayfamızı başarıyla ayağa kaldırdığımıza göre, bir sonraki aşamada sadece giriş yapmış kullanıcıların favori ekleme gibi işlemleri yapabilmesini sağlayacak özel yönlendirme (Private Route) mimarisini ele alacağız.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
useParams ile Rota Parametresi: Rota tanımındaki dinamik segmentleri (:productId) yakalamak için React Router'ın useParams kancası kullanılır.- Dinamik Bağlantı Kurgusu: Liste kartlarından detay sayfasına geçerken
Link bileşeninin to özelliğine dinamik şablon dizgisi (/products/product/${id}) verilmelidir.
- Bağımlılık Dizisi ve
useEffect: Detay verisini çekerken productId bilgisinin useEffect bağımlılık dizisine eklenmesi, parametre değişiminde doğru verinin tetiklenmesini sağlar.
- Koşullu Render ve Patates Olmaktan Korunma: Asenkron veri gelene kadar bileşenin çökmesini engellemek için
null kontrolü veya optional chaining (product?.title) mutlaka uygulanmalıdır.
- Merkezi Veri Yönetimi ve Private Route İhtiyacı: Sürekli yinelenen
fetch çağrıları servis yapılarıyla toparlanmalı; kimlik doğrulama gerektiren özel aksiyonlar için Private Route kurgusuna geçilmelidir.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)