React İle React Router Kullanarak Dinamik İçerik Yönlendirmesi Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Çalışmaya başlamadan önce sisteminizde Node.js'in güncel sürümünün (LTS) yüklü olduğundan emin olun. React Router kütüphanesini projenize dahil etmek için terminalinizde aşağıdaki komutları çalıştırmanız gerekmektedir. Bu kütüphane, React uygulamalarında çok sayfalı bir deneyim sunan tek sayfa uygulaması (SPA) mimarisini destekler.

npx create-react-app dinamik-rota-uygulamasi
cd dinamik-rota-uygulamasi
npm install react-router-dom@6

Kurulum tamamlandıktan sonra src dizini altında components ve pages klasörlerini oluşturarak projenizi modüler bir yapıya kavuşturabilirsiniz. Bu yapı, kodun okunabilirliğini ve bakımını kolaylaştıracaktır.

React Router Temel Yapılandırması

React Router'ın çalışması için uygulamanızın en üst seviyesinde BrowserRouter bileşenini kullanmalısınız. Bu bileşen, uygulamanızın URL ile senkronize olmasını sağlar. Aşağıdaki örnekte, temel bir yönlendirme yapısını nasıl kuracağınızı görebilirsiniz.

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import ProductDetail from './pages/ProductDetail';

function App() {
  return (
    
      
        
        
      
    
  );
}
export default App;

Burada /product/:id yapısındaki :id ifadesi, dinamik bir parametreyi temsil eder. React Router, bu parametreyi çalışma zamanında yakalayarak ilgili bileşene aktarmamıza olanak tanır.

useParams Hook'u ile Dinamik Veri Çekme

Dinamik içerik yönlendirmesinde en kritik adım, URL'den gelen parametreyi okumaktır. React Router'ın sunduğu useParams hook'u, URL'deki :id değerini bir nesne olarak döndürür. Bu değer ile veritabanınızdan veya bir API'den ilgili veriyi çekebilirsiniz.

import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams();
  
  // Gerçek bir projede burada API çağrısı yapılır
  return (
    

      


Ürün Detay Sayfası
      
Görüntülenen Ürün ID'si: {id}
    
  );
}

Bu yöntem, her ürün için ayrı bir bileşen oluşturmak yerine tek bir şablon ile binlerce farklı içeriği yönetmenize imkan tanır. Bu, kod tekrarını önleyen en verimli yöntemdir.

Dinamik Linkler Oluşturma

Kullanıcıları dinamik sayfalara yönlendirmek için standart a etiketi yerine Link bileşenini kullanmalısınız. Link bileşeni, sayfanın yeniden yüklenmesini engelleyerek React'in hız avantajını korur.

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

function ProductList() {
  const products = [{ id: 1, name: 'Laptop' }, { id: 2, name: 'Telefon' }];
  
  return (
    

      {products.map(product => (
        

          {product.name}
        
      ))}
    
  );
}

to prop'una dinamik olarak ürün ID'sini ekleyerek, her bir linkin doğru adrese yönlendirilmesini sağlıyoruz. Bu, SEO dostu URL yapıları oluşturmak için de oldukça önemlidir.

Yönlendirme Yöntemlerinin Karşılaştırılması

Aşağıdaki tablo, React Router kullanırken tercih edebileceğiniz farklı yönlendirme yaklaşımlarının avantaj ve dezavantajlarını özetlemektedir.

Programatik Yönlendirme ve useNavigate

Bazen bir işlem gerçekleştikten sonra (örneğin form gönderimi veya giriş yapma) kullanıcıyı otomatik olarak başka bir sayfaya yönlendirmeniz gerekir. Bu durumda useNavigate hook'u kullanılır.

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Giriş işlemleri...
    navigate('/dashboard');
  };

  return Giriş Yap;
}

navigate('/dashboard') komutu, kullanıcının tarayıcı geçmişine de eklenerek güvenli bir geçiş sağlar. Eğer geçmişi değiştirmek isterseniz navigate('/dashboard', { replace: true }) parametresini kullanabilirsiniz.

Güvenlik Uyarısı: Dinamik içerik yönlendirmelerinde, URL'den gelen ID değerlerini her zaman doğrulayın. Kullanıcı tarafından manipüle edilebilecek ID'ler, XSS (Cross-Site Scripting) veya yetkisiz veri erişimine yol açabilir. API tarafında her zaman yetkilendirme kontrolleri yapın.

Sıkça Sorulan Sorular

React Router neden 'a' etiketi yerine 'Link' kullanmamı istiyor?

'a' etiketi tarayıcının sayfayı tamamen yeniden yüklemesine neden olur. 'Link' ise React'in sanal DOM (Virtual DOM) yapısını kullanarak sadece değişen kısımları günceller, bu da uygulamayı çok daha hızlı kılar.

Dinamik bir rotada 404 sayfası nasıl gösterilir?

Routes bileşeninin en sonuna path="*" olan bir Route ekleyerek, eşleşmeyen tüm yolları özel bir 404 bileşenine yönlendirebilirsiniz.

useParams hook'u neden boş dönüyor?

Bunun en yaygın nedeni, bileşenin Routes içerisinde tanımlanmamış olması veya URL yolunun (path) bileşenle eşleşmemesidir. Route tanımındaki path ile Link'teki to değerinin aynı olduğundan emin olun.

Aynı sayfada birden fazla dinamik parametre kullanabilir miyim?

Evet, path="/category/:categoryId/product/:productId" şeklinde tanımlayarak useParams ile her iki parametreye de erişebilirsiniz.

React Router ile korumalı (protected) rotalar nasıl yapılır?

Kullanıcının giriş yapıp yapmadığını kontrol eden bir sarmalayıcı (wrapper) bileşen oluşturarak, giriş yapmamış kullanıcıları 'login' sayfasına yönlendirebilirsiniz.

React Router ile Performans Optimizasyonu ve Lazy Loading

Dinamik rotalar içeren büyük ölçekli uygulamalarda, tüm bileşenlerin uygulama ilk açıldığında yüklenmesi performans sorunlarına yol açabilir. Kullanıcı sadece belirli bir ürün detay sayfasına girdiğinde, o sayfaya ait kodların yüklenmesi en iyi pratiktir. React Router, React.lazy ve Suspense ile entegre çalışarak "Code Splitting" (kod bölme) işlemini kolaylaştırır.

Aşağıdaki örnekte, dinamik bir ürün sayfasının sadece ihtiyaç duyulduğunda yüklendiğini görebilirsiniz:

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const ProductDetail = lazy(() => import('./pages/ProductDetail'));

function App() {
  return (
    
      
        
          
        
      
    
  );
}

Bu yaklaşım, özellikle çok fazla dinamik rotaya sahip olan e-ticaret veya içerik yönetim sistemlerinde, uygulamanın ilk açılış süresini (Time to Interactive) ciddi oranda iyileştirir.

Dinamik Rotalarda Hata Ayıklama (Debugging) İpuçları

Dinamik yönlendirmelerle çalışırken en sık karşılaşılan sorunlar genellikle parametrelerin yanlış eşleşmesi veya rotaların çakışmasıdır. Hata ayıklama sürecini hızlandırmak için şu stratejileri izleyebilirsiniz:

• Rota Çakışmalarını Kontrol Edin: Eğer /product/:id rotanızın altında /product/new gibi sabit bir rotanız varsa, React Router'ın "en spesifik olanı seçme" kuralına dikkat edin. Sabit rotaları her zaman dinamik rotaların üzerine yazın.
• useLocation Hook'unu Kullanın: Mevcut rotanın tam olarak ne olduğunu ve hangi parametrelerin gönderildiğini görmek için useLocation hook'unu kullanarak konsola çıktı alabilirsiniz.
• Memory Router ile Test Edin: Birim testleri yazarken BrowserRouter yerine MemoryRouter kullanarak, tarayıcı geçmişine ihtiyaç duymadan rotalarınızı izole bir şekilde test edebilirsiniz.

Aşağıdaki kod bloğu, rotalarınızın eşleşme durumunu izlemek için basit bir "Debug" bileşeni örneğidir:

import { useLocation, useParams } from 'react-router-dom';

const RouteDebugger = () => {
  const location = useLocation();
  const params = useParams();

  console.log("Mevcut Konum:", location.pathname);
  console.log("Parametreler:", params);

  return null; // Arayüzde bir şey göstermez, sadece konsolu izler
};

// App bileşeninizin içinde herhangi bir yere ekleyin:
// 

Bu yöntem, özellikle karmaşık iç içe geçmiş (nested) rotalarda, hangi parametrenin hangi seviyede yakalandığını anlamanıza yardımcı olur. Hata ayıklama sürecinde console.log yerine React DevTools içerisindeki "Components" sekmesini kullanarak, bileşene aktarılan props değerlerini canlı olarak incelemek her zaman daha verimlidir.

Sonuç

React Router kullanarak dinamik içerik yönlendirmesi yapmak, modern web uygulamalarının temel taşıdır. Bu rehberde öğrendiğiniz useParams ile veri çekme, Link ile navigasyon ve useNavigate ile programatik yönlendirme teknikleri, profesyonel projelerinizin omurgasını oluşturacaktır. Bir sonraki adım olarak, bu rotaları bir "Private Route" yapısı ile korumayı ve yetkilendirme mekanizmalarını incelemenizi öneririm.

Yasal Uyarı ve Sorumluluk Reddi: Bu makalede paylaşılan kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanacağınız uygulamalarda, veritabanı güvenliği, kullanıcı yetkilendirmesi ve veri doğrulama konularında uzman görüşü almalı ve güncel güvenlik standartlarını (OWASP vb.) takip etmelisiniz.