React Router v6, tüm bu temel bileşenleri ve yeni nesil hook’ları (örneğin useNavigate, useParams, useLocation) bir araya getirerek, karmaşık yönlendirme gereksinimlerini bile şaşırtıcı derecede basit ve anlaşılır bir şekilde ele almanızı sağlar. Şimdi, bu temel yapı taşlarını zihnimize yerleştirdikten sonra, v5 ve v6 arasındaki dönüşümün ve yeniliklerin derinliklerine inmeye hazırız.

React Router v5 ve v6 Arasındaki Temel Farklar Nelerdir?

React Router v6, selefi v5’e göre pek çok açıdan basitleştirme ve modernizasyon getirmiştir. Bu değişiklikler, daha temiz kod, daha sezgisel API’ler ve gelişmiş performans sunmayı hedefler. V5’ten v6’ya geçiş yapmayı düşünen veya direkt v6 ile başlayacak geliştiriciler için bu temel farklılıkları anlamak kritik öneme sahiptir.

1. Switch Yerine Routes Bileşeni

React Router v5’te, rotaların tanımlanması ve eşleştirilmesi için bileşeni kullanılırdı. Switch, içerisindeki bileşenlerini baştan sona tarar ve URL ile eşleşen ilk rotayı render ederdi. Bu, özellikle karmaşık rota hiyerarşilerinde veya exact prop’unu yanlış kullanırken beklenmedik davranışlara yol açabilirdi.
şeklinde kullanılan exact prop’u, yolun tam olarak eşleşmesini sağlamak için gerekliydi.

React Router v6’da ise yerine bileşeni tanıtıldı. Routes, rotaların eşleşme algoritmasını kökten değiştirerek exact prop’una olan ihtiyacı ortadan kaldırmıştır. Artık Routes içerisindeki Route‘lar, en spesifik olandan en genel olana doğru bir eşleşme arar ve bu doğal olarak en uygun rotayı seçer. Ayrıca, Routes içinde iç içe (nested) rotaların daha kolay tanımlanmasına imkan tanır. Bu sayede, kodunuz daha okunabilir ve yönetilebilir hale gelir.

V5 Örneği:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function AppV5() {
  return (
    
      
        
        
        
        
      
    
  );
}
    

V6 Örneği:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function AppV6() {
  return (
    
      
        } />
        } />
        } />
        } />
      
    
  );
}
    

2. useHistory Yerine useNavigate Hook'u

V5'te, programatik olarak (bir olay veya durum değişikliğine bağlı olarak) bir sayfaya yönlendirme yapmak için useHistory hook'u kullanılırdı. Bu hook, geçmiş nesnesine erişim sağlar ve history.push('/yeni-yol') veya history.replace('/yeni-yol') gibi metotlarla yönlendirme yapılırdı.

React Router v6'da useHistory hook'u kaldırılmış ve yerine useNavigate hook'u gelmiştir. useNavigate, daha basit ve daha güçlü bir API sunar. Bir fonksiyon döndürür ve bu fonksiyonu çağırarak yönlendirme yapabilirsiniz. Ayrıca, geçmişte kaç adım geri gideceğinizi belirtmek için sayısal bir değer de alabilir.

V5 Örneği:

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

function LoginPageV5() {
  const history = useHistory();

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

  return (
    Giriş Yap
  );
}
    

V6 Örneği:

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

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

  const handleLogin = () => {
    // ... Giriş işlemleri ...
    navigate('/dashboard'); // Yönlendirme
    // navigate(-1); // Bir önceki sayfaya dön
  };

  return (
    Giriş Yap
  );
}
    

3. İç İçe Yönlendirmeler (Nested Routes) ve Outlet

V5'te iç içe yönlendirmeler, ana rotanın içinde tekrar tanımları yaparak yönetilirdi. Bu durum, özellikle karmaşık hiyerarşilerde kod tekrarına ve okunabilirlik sorunlarına yol açabiliyordu. Ayrıca, alt rotaların üst rotadaki bir bileşenin içinde render edilmesi için özel prop'ların geçirilmesi veya render fonksiyonlarının kullanılması gerekebilirdi.

React Router v6, iç içe yönlendirmeleri çok daha zarif bir şekilde ele alır. Üst , alt rotaları tanımlayabilir ve bu alt rotaların bileşenleri, üst bileşen içinde bileşeni kullanılarak render edilir. Bu, ortak layout'ları ve paylaşılan bileşenleri çok daha kolay yönetmenizi sağlar. Relative paths (göreceli yollar) kullanımı da bu süreçte büyük bir kolaylık sunar.

V5 Örneği (Karmaşık):

// ParentComponent.js
import { Switch, Route, useRouteMatch } from 'react-router-dom';

function ParentComponent() {
  let { path, url } = useRouteMatch();
  return (
    

      
Parent Component
      
        
          
Parent Index
        
        ${path}/child1}>
          
        
        ${path}/child2}>
          
        
      
    
  );
}

// App.js

    

V6 Örneği (Basit ve Temiz):

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

function ParentLayout() {
  return (
    

      
Parent Layout
      
      

       {/* Alt rotaların içeriği burada render edilecek */}
    
  );
}

function AppV6() {
  return (
    
      
        } />
        }>
          } /> {/* /parent yolu için */}
          } />
          } />
        
      
    
  );
}
    

Bu temel farklılıklar, React Router v6'nın daha modern, daha esnek ve daha geliştirici dostu bir deneyim sunma amacını açıkça göstermektedir. Özellikle iç içe yönlendirmelerdeki basitleşme, büyük uygulamaların yönetimini önemli ölçüde kolaylaştırmaktadır.

React Router v6 ile Uygulamalarınızda Yönlendirme Nasıl Yapılır? (Uygulamalı Kılavuz)

React Router v6'nın yeniliklerini teori düzeyinde inceledikten sonra, şimdi sıra bunları pratik bir şekilde uygulamaya geldi. Bu bölümde, adım adım bir React uygulamasında v6 ile yönlendirme kurmayı, dinamik rotaları yönetmeyi ve iç içe yönlendirmelerin gücünü kullanmayı öğreneceğiz. Bu kılavuz, konuya yeni başlayanların bile kolayca takip edebileceği şekilde tasarlanmıştır.

1. Kurulum ve İlk Adımlar

React Router v6'yı projenize eklemek için öncelikle react-router-dom paketini kurmanız gerekir. Aşağıdaki komutu kullanarak projelerinize kurulumu gerçekleştirebilirsiniz:

npm install react-router-dom@6
# veya
yarn add react-router-dom@6
    

Kurulum tamamlandıktan sonra, yönlendirme işlevselliğini uygulamanızın ana bileşeninde etkinleştirmemiz gerekiyor. Genellikle bu, src/index.js veya src/App.js dosyasında BrowserRouter bileşenini kullanarak yapılır.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);
    

Yukarıdaki kodda, App bileşenimizi BrowserRouter ile sardık. Bu, tüm alt bileşenlerin React Router'ın özelliklerine (Link, Routes, hook'lar vb.) erişebilmesini sağlar.

2. Basit Bir Yönlendirme Yapısı Oluşturma

Şimdi, ana sayfa, hakkında ve iletişim sayfaları için basit bir yönlendirme yapısı oluşturalım. Bunun için App.js dosyamızı ve birkaç temel bileşeni kullanacağız.

// src/components/HomePage.js
function HomePage() {
  return 
Ana Sayfa İçeriği
;
}
export default HomePage;

// src/components/AboutPage.js
function AboutPage() {
  return 
Hakkımızda Sayfası İçeriği
;
}
export default AboutPage;

// src/components/ContactPage.js
function ContactPage() {
  return 
İletişim Sayfası İçeriği
;
}
export default ContactPage;

// src/App.js
import { Routes, Route, Link } from 'react-router-dom';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import ContactPage from './components/ContactPage';

function App() {
  return (
    

      

      


      
        } />
        } />
        } />
      
    
  );
}

export default App;
    

Bu örnekte, Link bileşenleri navigasyon menüsünü oluştururken, Routes bileşeni içerisindeki Route'lar URL'ye göre doğru bileşenin render edilmesini sağlar. Gördüğünüz gibi, v5'teki exact prop'una artık ihtiyacımız yok.

3. Dinamik Yönlendirmeler ve useParams Kullanımı

Çoğu uygulamada, bir kaynak koleksiyonundaki (örneğin kullanıcılar veya ürünler) belirli bir öğeyi göstermek istersiniz. Bu durumlar için dinamik rotalar kullanırız. Dinamik rotalar, URL'de değişken bir segment (: ile belirtilir) içerir ve bu değişkenin değerine useParams hook'u ile erişebiliriz.

// src/components/UserPage.js
import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();
  return (
    
Kullanıcı Detayları: ID {id}
  );
}
export default UserPage;

// src/App.js (Routes kısmına ekleyin)
// ...
        } />
// ...

// Navigasyon menüsüne örnek link ekleyin
// ...
          

            Kullanıcı 123
          
          

            Kullanıcı 456
          
// ...
    

/users/123 gibi bir URL'ye gittiğinizde, UserPage bileşeni render edilecek ve useParams hook'u sayesinde id değişkeninin değeri "123" olarak alınacaktır.

4. İç İçe Yönlendirmeler (Nested Routes) ve Outlet

İç içe yönlendirmeler, belirli bir bölümün altındaki sayfaların ortak bir layout'u paylaşmasını sağlayan güçlü bir özelliktir. Örneğin, bir yönetici paneli genellikle sol menü ve üst navigasyon gibi ortak elementlere sahiptir, ancak ana içerik alanı alt rotalara göre değişir. React Router v6, Outlet bileşeni ile bu yapıyı inanılmaz derecede kolaylaştırır.

// src/components/DashboardLayout.js
import { Outlet, Link } from 'react-router-dom';

function DashboardLayout() {
  return (
    

      
      

         {/* Alt rotaların içeriği burada render edilecek */}
      
    
  );
}
export default DashboardLayout;

// src/components/DashboardIndex.js
function DashboardIndex() {
  return 
Dashboard Genel Bakış
;
}
export default DashboardIndex;

// src/components/ProfilePage.js
function ProfilePage() {
  return 
Profil Sayfası
;
}
export default ProfilePage;

// src/components/SettingsPage.js
function SettingsPage() {
  return 
Ayarlar Sayfası
;
}
export default SettingsPage;

// src/App.js (Routes kısmına ekleyin)
// ...
        }>
          } /> {/* /dashboard yolu için */}
          } />
          } />
        
// ...
    

Bu yapıda, /dashboard, /dashboard/profile ve /dashboard/settings yolları, DashboardLayout bileşenini kullanır ve alt içerik Outlet içinde dinamik olarak gösterilir. index prop'u, üst yolun kendisiyle (/dashboard) eşleştiğinde render edilecek varsayılan alt rotayı belirtir. Ayrıca, Link to="." veya Link to="profile" gibi göreceli yollar kullanarak daha temiz ve yeniden kullanılabilir navigasyonlar oluşturabilirsiniz. Bu, özellikle bir bileşeni farklı yerlerde kullandığınızda rotaları manuel olarak güncelleme zahmetinden kurtarır.

Programatik Yönlendirme ve Sayfa Bulunamadı (404) Yönetimi Nasıl Sağlanır?

Bazı durumlarda, kullanıcı etkileşimlerine veya belirli koşullara bağlı olarak programatik olarak yönlendirme yapmanız gerekebilir. Örneğin, bir form gönderimi başarılı olduğunda veya bir kullanıcının kimliği doğrulandığında farklı bir sayfaya geçiş yapmak isteyebilirsiniz. React Router v6, bu tür senaryolar için useNavigate hook'unu sunar. Ayrıca, kullanıcıların yanlış URL'ler girdiğinde karşılaşacakları "Sayfa Bulunamadı" (404) durumlarını yönetmek de iyi bir kullanıcı deneyimi için oldukça önemlidir.

1. useNavigate Hook'u ile Programatik Yönlendirme

useNavigate, fonksiyonel bileşenlerde programatik yönlendirme yapmak için kullanılan bir hook'tur. Bu hook, çağrıldığında bir yönlendirme fonksiyonu döndürür. Bu fonksiyonu, istediğiniz yolu (path) veya bir geçmiş adımı (örneğin -1 bir önceki sayfaya gitmek için) parametre olarak vererek kullanabilirsiniz.

// src/components/LoginPage.js
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function LoginPage() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // Gerçek bir uygulamada burada kimlik doğrulama API çağrısı olur.
    if (username === 'admin' && password === '123') {
      console.log('Giriş başarılı!');
      // Başarılı giriş sonrası /dashboard sayfasına yönlendirme
      navigate('/dashboard', { replace: true, state: { fromLogin: true } });
      // replace: true geçmişteki mevcut girdiyi değiştirir, böylece kullanıcı geri dönemez.
      // state ile yönlendirme sırasında ek veri iletebilirsiniz.
    } else {
      console.log('Geçersiz kullanıcı adı veya şifre.');
      alert('Giriş başarısız!');
    }
  };

  return (
    

      
Giriş Yap
      

         setUsername(e.target.value)}
        />

         setPassword(e.target.value)}
        />

        Giriş Yap
      
       navigate(-1)}>Geri Dön
    
  );
}
export default LoginPage;
    

Yukarıdaki örnekte, kullanıcı "admin" ve "123" ile giriş yapmaya çalıştığında /dashboard sayfasına yönlendirilir. replace: true seçeneği, kullanıcının tarayıcının geri düğmesine basarak giriş sayfasına geri dönmesini engeller. Bu, özellikle hassas işlemler (ödeme, giriş) sonrası önemli bir güvenlik ve kullanıcı deneyimi geliştirmesidir. Ayrıca state prop'u ile yönlendirilen sayfaya ek veri gönderebilirsiniz, bu veriye useLocation().state ile erişilir.

2. Sayfa Bulunamadı (404) Yönetimi

Uygulamanızdaki rotalarla eşleşmeyen bir URL'ye erişildiğinde, kullanıcıya bir "Sayfa Bulunamadı" mesajı göstermek yaygın ve iyi bir pratik. React Router v6'da bunu, tüm tanımlanmış rotaların sonuna bir wildcard (*) yolu ekleyerek kolayca yapabiliriz. * yolu, diğer tüm rotaların eşleşmemesi durumunda yakalanacak olan varsayılan rotayı temsil eder.

// src/components/NotFoundPage.js
import { Link } from 'react-router-dom';

function NotFoundPage() {
  return (
    

      
404 - Sayfa Bulunamadı
      
Aradığınız sayfa mevcut değil.
      Ana Sayfaya Dön
    
  );
}
export default NotFoundPage;

// src/App.js (Routes bloğunun en sonuna ekleyin)
// ...
        } /> {/* Tüm eşleşmeyen yollar için */}
// ...
    

Routes bileşeni içerisindeki Route'lar, en spesifik olandan en genel olana doğru eşleştiği için, path="*" olan rota en sona eklenmelidir. Bu sayede, daha spesifik yollar önce kontrol edilir ve eğer hiçbiri eşleşmezse, en son NotFoundPage devreye girer. Bu yapı, uygulamanızın beklenmedik URL girişlerine karşı sağlam olmasını sağlar ve kullanıcıların kaybolmasını engeller.

Gerçek Dünya Senaryolarında React Router v6 Kullanımı: Bir E-Ticaret Uygulaması Örneği

Teorik bilgiler ve temel örnekler güzel olsa da, React Router v6'nın gerçek bir uygulamada nasıl kullanıldığını görmek en iyi öğrenme yollarından biridir. Şimdi, bir e-ticaret uygulamasının yönlendirme yapısını React Router v6 ile nasıl kurabileceğimizi gösteren bir vaka analizine odaklanalım. Bu örnek, dinamik rotalar, iç içe yönlendirmeler, navigasyon menüsü ve hatta basit bir kimlik doğrulama koruması gibi yaygın gereksinimleri kapsayacaktır.

Uygulama Senaryosu: Mini E-Ticaret Platformu

Hayali e-ticaret uygulamamız aşağıdaki sayfa yapısına sahip olacak:

• Ana Sayfa (/): Öne çıkan ürünler.
• Ürün Listesi (/products): Tüm ürünleri listeler.
• Ürün Detayı (/products/:productId): Belirli bir ürünün detaylarını gösterir.
• Sepet (/cart): Kullanıcının sepetindeki ürünler.
• Yönetici Paneli (/admin): Sadece oturum açmış yöneticilerin erişebileceği bir alan.
• Yönetici Ana Sayfası (/admin): Yönetici paneline genel bakış.
• Ürün Yönetimi (/admin/products): Ürünleri ekleme, düzenleme, silme.
• Kullanıcı Yönetimi (/admin/users): Kullanıcıları yönetme.
• Giriş Sayfası (/login): Kullanıcıların giriş yapabileceği sayfa.
• 404 Sayfası (*): Bulunamayan sayfalar için.

Kod Yapısı ve Bileşenler

// src/AuthContext.js (Basit bir kimlik doğrulama bağlamı)
import React, { createContext, useState, useContext } from 'react';

const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null); // 'admin' veya null

  const signin = (newUser, callback) => {
    // Gerçek bir uygulamada burada API çağrısı ve token saklama olur
    return new Promise(resolve => {
      setUser(newUser);
      resolve();
      callback && callback();
    });
  };

  const signout = (callback) => {
    return new Promise(resolve => {
      setUser(null);
      resolve();
      callback && callback();
    });
  };

  const value = { user, signin, signout };
  return {children};
}

export function useAuth() {
  return useContext(AuthContext);
}

// src/components/RequireAuth.js (Kimlik doğrulama koruması)
import React from 'react';
import { useLocation, Navigate } from 'react-router-dom';
import { useAuth } from '../AuthContext';

function RequireAuth({ children }) {
  let auth = useAuth();
  let location = useLocation();

  if (!auth.user) {
    // Oturum açılmadıysa, giriş sayfasına yönlendir.
    // Ancak, kullanıcı giriş yaptıktan sonra buraya geri dönebilmesi için
    // mevcut konum bilgisini state ile gönder.
    return ;
  }

  return children;
}

// src/components/Layout.js (Genel layout bileşeni)
import { NavLink, Outlet } from 'react-router-dom';
import { useAuth } from '../AuthContext';

function Layout() {
  const auth = useAuth();

  return (
    

      
      

         {/* Sayfa içeriği burada render edilecek */}
      
    
  );
}
export default Layout;

// src/components/AdminLayout.js (Admin paneli için özel layout)
import { NavLink, Outlet } from 'react-router-dom';

function AdminLayout() {
  return (
    

      
      

        
      
    
  );
}
export default AdminLayout;

// Basit sayfa bileşenleri (HomePage, ProductsPage, ProductDetailPage, CartPage, AdminDashboard, AdminProducts, AdminUsers, NotFoundPage, LoginPage)
// İçerikleri kısa tutulmuştur.
function HomePage() { return 
Ana Sayfa - Öne Çıkan Ürünler
;}
function ProductsPage() { return 
Ürün Listesi
;}
function ProductDetailPage() {
  const { productId } = useParams();
  return 
Ürün Detayı: ID {productId}
;
}
function CartPage() { return 
Alışveriş Sepeti
;}
function AdminDashboard() { return 
Yönetici Paneli - Genel Bakış
;}
function AdminProducts() { return 
Yönetici Paneli - Ürün Yönetimi
;}
function AdminUsers() { return 
Yönetici Paneli - Kullanıcı Yönetimi
;}
function NotFoundPage() { return 
404 - Sayfa Bulunamadı
;}

// src/App.js (Ana uygulama bileşeni)
import { Routes, Route } from 'react-router-dom';
import { AuthProvider } from './AuthContext';
// Tüm sayfa ve layout bileşenleri buraya import edilecek

function App() {
  return (
     {/* Kimlik doğrulama bağlamı sağlıyoruz */}
      
        }> {/* Ortak layout */}
          } />
          } />
          } />
          } />
          } />

           {/* Yönetici paneline erişim için kimlik doğrulaması */}
                
              
            }
          >
            } />
            } />
            } />
          

          } /> {/* Eşleşmeyen tüm yollar */}
        
      
    
  );
}

export default App;

// Stil için (Örn: src/index.css veya App.css)
/*
.active-link {
  font-weight: bold;
  color: blue;
}
*/
    

Bu örnekte, Layout bileşeni tüm genel uygulama navigasyonunu ve içeriği sarmalar. İçindeki Outlet, ana rota içeriğini render eder. Yönetici paneli için, AdminLayout adında ayrı bir iç içe layout kullandık ve bu bölümü RequireAuth bileşeni ile koruduk. RequireAuth, kullanıcının oturum açıp açmadığını kontrol eder ve eğer açmadıysa onu giriş sayfasına yönlendirir. Giriş sayfasında, başarılı bir kimlik doğrulamasından sonra kullanıcı, state ile iletilen orijinal hedefine geri yönlendirilir. NavLink kullanımı, aktif olan bağlantıyı vurgulayarak kullanıcıya görsel geri bildirim sağlar.

Bu vaka analizi, React Router v6'nın esnekliğini ve güçlü yapısını gerçek dünya senaryolarında nasıl kullanabileceğinizi gösteriyor. İç içe yönlendirmeler, dinamik parametreler ve programatik yönlendirme gibi özellikler sayesinde, büyük ve karmaşık uygulamaları bile temiz ve yönetilebilir bir şekilde inşa edebilirsiniz.

React Router v6 ile Performansı ve Geliştirici Deneyimini Nasıl Artırırsınız? (İpuçları ve Püf Noktaları)

React Router v6, zaten performans odaklı bir yapıya sahip olsa da, uygulamanızın hızını ve geliştirici deneyimini daha da optimize etmek için uygulayabileceğiniz bazı ileri düzey teknikler ve en iyi pratikler bulunmaktadır.

1. Code Splitting (Kod Bölümleme) ve Lazy Loading

Tek sayfa uygulamalar büyüdükçe, tüm uygulamanın JavaScript bundle boyutu da artar, bu da ilk yükleme süresini uzatabilir. Code Splitting (kod bölümleme), uygulamanızın kodunu daha küçük parçalara bölerek yalnızca o an ihtiyaç duyulan kodun yüklenmesini sağlar. React Router ile bu, her bir rota için ayrı bir JavaScript parçası yükleyerek kolayca yapılabilir.

React'ın React.lazy() ve bileşenleri, bu işlemi basitleştirir:

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

const HomePage = lazy(() => import('./components/HomePage'));
const AboutPage = lazy(() => import('./components/AboutPage'));
const ProductDetailPage = lazy(() => import('./components/ProductDetailPage'));
const AdminLayout = lazy(() => import('./components/AdminLayout')); // Layoutlar bile olabilir

function AppWithLazyLoading() {
  return (
    Yükleniyor...