React Router Parametreleri: Dinamik Yönlendirme Rehberi
React uygulamalarında kullanıcı deneyimini zenginleştirmek ve veri odaklı sayfalar oluşturmak için dinamik yönlendirme (routing) hayati öneme sahiptir. React Router, bu dinamikliği sağlamak için parametreleri kullanır. Bu rehberde, React Router parametrelerinin ne olduğunu, nasıl kullanıldığını ve uygulamalarınızda güçlü, esnek rotalar oluşturmak için en iyi uygulamaları derinlemesine inceleyeceğiz.
Giriş: Dinamik Rotaların Gücü
Modern web uygulamaları genellikle aynı yapıya sahip ancak farklı içeriklere sahip sayfalar barındırır. Örneğin, bir e-ticaret sitesinde binlerce ürün olmasına rağmen, her ürünün detay sayfası aynı şablona sahiptir. Bu gibi durumlarda, her ürün için ayrı bir rota tanımlamak yerine, tek bir dinamik rota şablonu oluşturup ürün kimliğini (ID) URL üzerinden parametre olarak geçirmek çok daha verimli ve sürdürülebilirdir. React Router parametreleri tam da bu ihtiyacı karşılar: URL’deki değişken kısımları yakalayarak bileşenlerinize veri aktarmanızı sağlarlar. Bu sayede, uygulamanız daha ölçeklenebilir, bakımı daha kolay ve kullanıcı dostu hale gelir.
React Router ve Dinamik Rotalar
React Router, uygulamanızın farklı URL’lere farklı bileşenleri render etmesini sağlayan popüler bir kütüphanedir. Dinamik rotalar oluşturmak için URL şablonlarında belirli yer tutucular tanımlarız. Bu yer tutuculara “parametre” adı verilir.
React Router’da bir parametre tanımlamak için rota yolunda iki nokta üst üste (:) işaretini kullanırız. Örneğin, /products/:id rotası, /products/123, /products/abc gibi URL’leri eşleştirecektir. :id kısmı, URL’deki değişen değeri yakalayan parametredir.
Temel bir React Router kurulumu şu şekildedir:
// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './components/HomePage';
import ProductDetail from './components/ProductDetail';
import UserProfile from './components/UserProfile';
import NotFound from './components/NotFound';
function App() {
return (
);
}
export default App;Yukarıdaki örnekte:
– /products/:id: Tek bir parametre (id) tanımlar.
– /users/:role/:id: İki parametre (role ve id) tanımlar.
– *: Herhangi bir eşleşmeyen rota için bir yakalama (catch-all) rotasıdır, genellikle 404 sayfaları için kullanılır.
Parametre Türleri ve Kullanımı
React Router, farklı senaryolar için çeşitli parametre tanımlama yöntemleri sunar.
Tekli Parametreler
En yaygın kullanım şeklidir. Tek bir dinamik değeri URL’den almak için kullanılır.
Tanım: /items/:itemId
Örnek URL: /items/123, /items/laptop
// src/components/ProductDetail.js
import React from 'react';
import { useParams } from 'react-router-dom';
function ProductDetail() {
const { id } = useParams(); // URL'den 'id' parametresini alır
// Bu ID'yi kullanarak API'den ürün detaylarını çekebilirsiniz
// useEffect(() => { / fetch product data / }, [id]);
return (
Ürün Detay Sayfası
Ürün ID: {id}
{/ Burada ürün detaylarını render edebilirsiniz /}
);
}
export default ProductDetail;useParams hook’u, mevcut rotanın parametrelerini içeren bir nesne döndürür. Bu nesneden istediğiniz parametreyi destructing (yapı bozma) yöntemiyle alabilirsiniz.
Çoklu Parametreler
Bazen bir rota birden fazla dinamik bilgiye ihtiyaç duyabilir. Örneğin, bir kullanıcının rolü ve ID’si gibi.
Tanım: /users/:role/:userId
Örnek URL: /users/admin/101, /users/editor/205
// src/components/UserProfile.js
import React from 'react';
import { useParams } from 'react-router-dom';
function UserProfile() {
const { role, id } = useParams(); // 'role' ve 'id' parametrelerini alır
return (
Kullanıcı Profili Sayfası
Kullanıcı Rolü: {role}
Kullanıcı ID: {id}
{/ Rol ve ID'ye göre farklı içerik gösterebilirsiniz /}
);
}
export default UserProfile;useParams hook’u, tanımladığınız tüm parametreleri içeren bir nesne döndürecektir.
Opsiyonel Parametreler
Bir parametrenin URL’de bulunup bulunmamasının isteğe bağlı olduğu durumlar için kullanılır. Parametre adının sonuna ? eklenerek belirtilir.
Tanım: /search/:query?
Örnek URL: /search/react, /search
// src/components/SearchPage.js
import React from 'react';
import { useParams } from 'react-router-dom';
function SearchPage() {
const { query } = useParams(); // 'query' parametresini alır, opsiyoneldir
return (
Arama Sonuçları
{query ? (
Aranan kelime: {query}
) : (
Herhangi bir arama kelimesi girilmedi. Popüler aramaları gösteriliyor.
)}
{/ Arama sonuçlarını burada göster /}
);
}
export default SearchPage;query parametresi mevcut değilse, useParams tarafından döndürülen nesnede query değeri undefined olacaktır. Bu durumu kontrol ederek farklı içerikler gösterebilirsiniz.
Parametreleri Kod İçinde Kullanma
Parametreler, React bileşenlerinizde çeşitli şekillerde kullanılabilir.
useParams Hook’u ile Parametrelere Erişim
useParams hook’u, fonksiyonel bileşenler içinde mevcut rotanın URL parametrelerine erişmenin ana yoludur. Bileşen render edildiğinde, React Router mevcut URL’yi eşleştirir ve yakaladığı tüm parametreleri bir nesne olarak useParams aracılığıyla sağlar.
// src/components/ItemDetail.js
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
function ItemDetail() {
const { itemId } = useParams();
const [item, setItem] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
if (itemId) {
setLoading(true);
setError(null);
// itemId'ye göre API'den veri çekme simülasyonu
setTimeout(() => {
if (itemId === '1') {
setItem({ id: '1', name: 'Kitap', description: 'Harika bir roman.' });
} else if (itemId === '2') {
setItem({ id: '2', name: 'Defter', description: 'Not almak için ideal.' });
} else {
setError('Ürün bulunamadı.');
setItem(null);
}
setLoading(false);
}, 500);
}
}, [itemId]); // itemId değiştiğinde tekrar çalıştır
if (loading) return Yükleniyor...
;
if (error) return Hata: {error}
;
if (!item) return Ürün seçilmedi veya bulunamadı.
;
return (
{item.name}
ID: {item.id}
{item.description}
);
}
export default ItemDetail;Bu örnekte, useEffect hook’u itemId parametresi değiştiğinde API’den ilgili ürün verisini çekmek için kullanılıyor. Bu, dinamik rotaların en yaygın kullanım senaryolarından biridir.
useNavigate ve Parametrelerle Programatik Navigasyon
Kullanıcı bir butona tıkladığında veya bir form gönderdiğinde olduğu gibi, programatik olarak bir rotaya gitmeniz gerekebilir. useNavigate hook’u bu amaçla kullanılır.
// src/components/AdminPanel.js
import React from 'react';
import { useNavigate } from 'react-router-dom';
function AdminPanel() {
const navigate = useNavigate();
const handleEditUser = (userId) => {
// Dinamik bir parametre ile kullanıcı düzenleme sayfasına yönlendirme
navigate(/users/edit/${userId});
};
return (
Yönetici Paneli
);
}
export default AdminPanel;Burada, handleEditUser fonksiyonu, aldığı userId değerini kullanarak dinamik bir URL oluşturur ve kullanıcıyı o URL’e yönlendirir.
Link Bileşeni ve Parametreler
Kullanıcıların bir sayfadan diğerine gezmesini sağlamak için Link bileşeni kullanılır. Dinamik rotalar için to prop’una JavaScript template literal’ları ( ) kullanarak dinamik parametreler ekleyebilirsiniz.
// src/components/ProductList.js
import React from 'react';
import { Link } from 'react-router-dom';
const products = [
{ id: '1', name: 'Klavye' },
{ id: '2', name: 'Fare' },
{ id: '3', name: 'Monitör' },
];
function ProductList() {
return (
Ürün Listesi
{products.map(product => (
-
/products/${product.id}}>{product.name}
))}
);
}
export default ProductList;Bu örnek, her bir ürün için dinamik olarak /products/1, /products/2 gibi URL’ler oluşturan Link bileşenlerini göstermektedir.
En İyi Uygulamalar ve Dikkat Edilmesi Gerekenler
Dinamik rotaları kullanırken uygulamanızın performansını, güvenliğini ve kullanıcı deneyimini artırmak için bazı önemli noktalar vardır.
Parametre Doğrulama (Parameter Validation)
URL parametreleri kullanıcı tarafından değiştirilebilir. Bu nedenle, bileşeninizde bu parametreleri kullanmadan önce doğrulamanız önemlidir.
– Tip Kontrolü: id parametresinin bir sayı olması bekleniyorsa, Number(id) ile kontrol edin ve isNaN() ile geçerliliğini doğrulayın.
– Güvenlik: Parametreleri doğrudan veritabanı sorgularında kullanıyorsanız (sunucu tarafında), SQL injection gibi güvenlik açıklarına karşı dikkatli olun ve mutlaka sanitize edin.
– Hata Yönetimi: Geçersiz bir parametre durumunda kullanıcıya anlamlı bir hata mesajı gösterin veya 404 sayfasına yönlendirin.
// ProductDetail.js içinde doğrulama örneği
const { id } = useParams();
const productId = parseInt(id);
if (isNaN(productId)) {
return Geçersiz Ürün ID'si.
;
}
// productId ile işlemlere devam etVeri Getirme (Data Fetching)
useEffect hook’u, parametreler değiştiğinde yeni veri getirmek için idealdir.
– Bağımlılık Dizisi: useEffect hook’unun bağımlılık dizisine parametreyi eklemeyi unutmayın ([id]). Bu, parametre değiştiğinde verinin yeniden çekilmesini sağlar.
– Yüklenme ve Hata Durumları: Veri çekme sırasında kullanıcıya yüklenme (loading) durumu gösterin ve olası hataları (error) yönetin.
SEO Dostu URL’ler (SEO-Friendly URLs)
Anlamlı URL parametreleri, arama motorlarının içeriğinizi daha iyi anlamasına yardımcı olur. Örneğin, /products/123 yerine /products/iphone-13-pro-max gibi slug’lar kullanmak daha iyidir. React Router bunu destekler, :slug olarak bir parametre tanımlayabilirsiniz.
URL Yapısı Tasarımı (URL Structure Design)
URL’lerinizin tutarlı ve mantıklı bir hiyerarşiye sahip olduğundan emin olun. Bu hem geliştiriciler hem de kullanıcılar için gezinmeyi kolaylaştırır. Örneğin:
– /categories/:categoryName/products/:productId
– /users/:userId/settings
Sonuç
React Router parametreleri, dinamik ve etkileşimli React uygulamaları oluşturmanın temel taşlarından biridir. useParams hook’u ile URL’deki değişken bilgilere kolayca erişebilir, Link ve useNavigate ile dinamik rotalara yönlendirme yapabilirsiniz. Bu rehberde öğrendiğiniz bilgileri ve en iyi uygulamaları kullanarak, uygulamanızda güçlü, esnek ve kullanıcı dostu bir yönlendirme yapısı kurabilirsiniz.
Sıkça Sorulan Sorular (SSS)
S1: useParams sadece fonksiyon bileşenlerinde mi kullanılır?
C1: Evet, useParams bir React Hook’udur ve sadece fonksiyon bileşenleri veya özel Hook’lar içinde kullanılabilir. Sınıf bileşenlerinde parametrelere erişmek için withRouter Higher-Order Component’ini kullanmanız gerekirdi, ancak React Router v6 ile fonksiyonel bileşenler ve Hook’lar tercih edilen yöntemdir.
S2: Parametreler ve Query String’ler arasındaki fark nedir?
C2:
– Parametreler: URL’nin yol kısmının bir parçasıdır (örn. /products/:id). Genellikle belirli bir kaynağın kimliğini veya hiyerarşik bilgiyi belirtmek için kullanılır. Kaynağın bir parçası olarak kabul edilir.
– Query String’ler: URL’nin sonunda ?key=value&anotherKey=anotherValue şeklinde yer alır. Genellikle filtreleme, sıralama, sayfalama veya isteğe bağlı verileri iletmek için kullanılır. Kaynağın kendisini değil, kaynağın nasıl sunulacağını etkileyen bilgilerdir. useSearchParams hook’u ile erişilir.
S3: Bir parametreye erişmeye çalıştığımda undefined alırsam ne yapmalıyım?
C3:
1. Rota Tanımını Kontrol Edin: Route bileşenindeki path prop’unun parametreyi doğru şekilde tanımladığından emin olun (örn. /products/:id).
2. URL’yi Kontrol Edin: Tarayıcı URL’sinin rota tanımınızla eşleştiğinden ve parametre değerini içerdiğinden emin olun (örn. /products/123).
3. Parametre Adını Kontrol Edin: useParams() ile aldığınız nesneden doğru parametre adını (büyük/küçük harf duyarlı) istediğinizden emin olun (örn. const { id } = useParams(); eğer rota :id ise).
4. Opsiyonel Parametreler: Eğer parametre opsiyonel (:id?) ise, URL’de bulunmaması durumunda undefined olması normaldir. Bu durumu kodunuzda yönetmelisiniz.
S4: Parametre isimleri büyük/küçük harf duyarlı mı?
C4: Evet, React Router’da parametre isimleri büyük/küçük harf duyarlıdır. Eğer rotayı /products/:productId olarak tanımladıysanız, useParams() ile const { productId } = useParams(); şeklinde erişmelisiniz, const { productid } = useParams(); şeklinde değil.