React İle Bileşen Bazlı Sayfa Navigasyonu Nasıl Yapılır?

Navigasyon çubuğunuzu (Navbar) şu şekilde oluşturabilirsiniz:

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

const Navbar = () => {
  return (
    
      

        
Anasayfa
        
Hakkımızda
      
    
  );
};

Bu kod, uygulamanızın her sayfasında görünecek bir navigasyon menüsü oluşturur. to özelliği, yönlendirilecek rotayı belirtir ve React Router'ın uygulama durumunu güncellemesini sağlar.

Dinamik Rotalar ve Parametre Kullanımı

Çoğu uygulamada ürün detayları veya kullanıcı profilleri gibi dinamik içeriklere ihtiyaç duyarız. Bunun için URL'de değişken kısımlar tanımlarız. :id gibi ifadeler, React Router'a buranın dinamik bir değer olduğunu anlatır.

Dinamik bir sayfa oluşturmak için şu yöntemi kullanın:

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

const ProductDetail = () => {
  const { id } = useParams();
  return 


Ürün Detayı: {id}
;
};

// Route tanımı:

useParams hook'u (kanca), URL'deki parametreleri yakalamamızı sağlar. Bu, veritabanından veri çekerken ilgili ID'yi kullanmak için kritik bir yöntemdir.

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

Programatik Navigasyon ve useNavigate Kullanımı

Bazen bir işlem bittikten sonra (örneğin form gönderimi sonrası) kullanıcıyı başka bir sayfaya yönlendirmeniz gerekir. Bu durumda useNavigate hook'u kullanılır.

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

const LoginForm = () => {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Giriş işlemleri burada yapılır
    navigate('/dashboard');
  };

  return Giriş Yap;
};

Bu yöntem, kullanıcı etkileşimi dışında mantıksal bir akışa bağlı geçişler yapmanıza olanak tanır. navigate(-1) kullanarak bir önceki sayfaya dönmek gibi esnek seçenekler de mevcuttur.

Güvenlik Uyarısı: Kullanıcıları yönlendirirken URL parametrelerinin doğruluğunu mutlaka kontrol edin. XSS (Cross-Site Scripting) saldırılarına karşı, URL'den gelen verileri doğrudan DOM'a yazdırmadan önce temizleyin veya doğrulayın.

Sıkça Sorulan Sorular

React Router'da 404 sayfası nasıl yapılır?

Routes içerisine path="*" şeklinde bir rota ekleyerek, eşleşmeyen tüm URL'ler için özel bir NotFound bileşeni gösterebilirsiniz.

Sayfa geçişlerinde animasyon nasıl eklenir?

Framer Motion gibi kütüphaneler, React Router ile entegre çalışarak sayfa giriş-çıkış efektleri oluşturmanıza olanak tanır.

Korumalı rotalar (Protected Routes) nasıl oluşturulur?

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.

URL'deki sorgu parametrelerini (query params) nasıl okurum?

useSearchParams hook'unu kullanarak ?search=react gibi URL parametrelerine erişebilirsiniz.

Neden a etiketi yerine Link kullanmalıyım?

a etiketi sayfayı tamamen yeniden yüklediği için React'in state'i sıfırlanır. Link ise sadece içeriği güncelleyerek SPA deneyimini korur.

Sorumluluk Reddi: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanırken, özellikle kimlik doğrulama ve veri güvenliği konularında profesyonel güvenlik standartlarını (JWT, HTTPS, input sanitization) uyguladığınızdan emin olun.

React Router ile Kod Bölümleme (Code Splitting) ve Lazy Loading

Büyük ölçekli React uygulamalarında, tüm bileşenleri tek bir JavaScript dosyasında yüklemek, uygulamanın ilk açılış süresini (LCP - Largest Contentful Paint) ciddi oranda yavaşlatır. React Router, React.lazy ve Suspense yapılarıyla entegre çalışarak, rotalar arasında geçiş yapıldığında ilgili kod bloğunu dinamik olarak yüklemenize olanak tanır.

Bu yöntem, kullanıcının sadece o an ihtiyaç duyduğu kodu indirmesini sağlayarak bant genişliği tasarrufu sağlar.

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

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

function App() {
  return (
    
      
        
          
          
        
      
    
  );
}

Navigasyon Hata Ayıklama ve İzleme Stratejileri

Karmaşık navigasyon yapılarında, kullanıcının hangi rotadan geldiğini veya bir yönlendirme hatasının neden tetiklendiğini anlamak zor olabilir. React Router, geliştirme sürecinde rotaları izlemek için useLocation kancasını (hook) sunar. Bu kanca, mevcut URL yolunu, sorgu parametrelerini ve state bilgilerini anlık olarak takip etmenizi sağlar.

Aşağıdaki örnekte, her rota değişikliğinde konsola mevcut konumu yazdıran bir izleme bileşeni oluşturulmuştur:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function RouteTracker() {
  const location = useLocation();

  useEffect(() => {
    console.log("Kullanıcı şu rotaya geçti:", location.pathname);
    // Burada Google Analytics veya benzeri bir izleme aracı tetiklenebilir
  }, [location]);

  return null;
}

// App bileşeni içerisinde kullanımı:
// 
//   
//   ...
// 

Navigasyon Hatalarını Yönetme

Kullanıcıların var olmayan bir alt rotaya erişmeye çalışması durumunda veya dinamik verilerin yüklenemediği senaryolarda, ErrorBoundary yapısını React Router ile birleştirmek en iyi pratiktir. Bu sayede, navigasyon kaynaklı bir hata tüm uygulamanın çökmesini engeller ve kullanıcıya daha kontrollü bir hata mesajı gösterilir.

Sonuç

React ile bileşen bazlı sayfa navigasyonu, uygulamanızın kullanıcı dostu ve performanslı olmasını sağlar. Bu rehberde öğrendiğiniz BrowserRouter, Link, useParams ve useNavigate yapıları, profesyonel bir SPA geliştirmenin temel taşlarıdır. Bir sonraki adım olarak, "Lazy Loading" (tembel yükleme) yöntemini kullanarak sayfalarınızı parçalar halinde yüklemeyi ve uygulamanızın ilk açılış hızını optimize etmeyi araştırabilirsiniz.