React Router ile Uygulama İçi Yönlendirme (Routing) Nasıl Yönetilir?

React uygulamalarında farklı sayfalar arasında sayfa yenilenmeden geçiş yapmak istiyorsanız, React Router DOM kütüphanesi en popüler çözümlerden biridir.
Bu rehberde, yönlendirme sistemini adım adım kuracak, dinamik rotalar ve React Hook’larıyla (ör. useParams, useLocation) çalışma mantığını öğreneceksiniz.

---

📘 Bu Rehberde Ne Öğreneceksiniz

• React Router’ı projeye nasıl dahil edeceğinizi
• <Link> bileşeni ile sayfa yenilenmeden geçiş yapmayı
• URL parametreleriyle dinamik bileşenleri nasıl yöneteceğinizi
• useLocation, useParams ve useRouteMatch Hook’larını kullanmayı
• İç içe rotalar (nested routes) oluşturmayı

---

⚙️ Ön Gereksinimler

• Bilgisayarınızda Node.js ve npm kurulu olmalı
• create-react-app ile oluşturulmuş boş bir React projesi (örnek: rabisu-yonlendirme)
• Temel düzeyde React, JavaScript, HTML ve CSS bilgisi

---

1️⃣ React Router Kurulumu ve Bileşen Hazırlığı

React Router, uygulamanızda kullanıcıların farklı URL’lere giderken bile sayfa yenilenmeden gezinmesini sağlar.

🔧 Kurulum

npm install react-router-dom

Bu komut, tarayıcı tabanlı yönlendirme yapmamızı sağlayan paketi yükler.

🧩 Basit Sayfa Bileşenleri

Örnek olarak üç bileşen oluşturalım:

mkdir src/components/Yunus
mkdir src/components/Balina
mkdir src/components/Fok

Yunus.js

import React from 'react';
export default function Yunus() {
  return <h2>Yunus</h2>;
}

Benzer şekilde Balina.js ve Fok.js dosyalarını oluşturabilirsiniz.

---

2️⃣ Rotaları Tanımlama

Artık her bileşeni bir URL yoluna bağlayabiliriz.

App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Yunus from '../Yunus/Yunus';
import Balina from '../Balina/Balina';
import Fok from '../Fok/Fok';

function App() {
  return (
    <div className="sarmalayici">
      <h1>Rabisu Deniz Canlıları</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/yunus"><Yunus /></Route>
          <Route path="/balina"><Balina /></Route>
          <Route path="/fok"><Fok /></Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Switch, sadece ilk eşleşen rotayı render eder.

---

3️⃣ Sayfa Yenilenmeden Geçiş (Link Kullanımı)

Klasik <a> etiketi yerine, React Router’ın <Link> bileşenini kullanarak hızlı geçiş yapabilirsiniz.

<nav>
  <ul>
    <li><Link to="/yunus">Yunus</Link></li>
    <li><Link to="/balina">Balina</Link></li>
    <li><Link to="/fok">Fok</Link></li>
  </ul>
</nav>

<Link> bileşeni, sayfayı yenilemeden yönlendirir ve SPA (Single Page Application) deneyimi sağlar.

---

4️⃣ Dinamik URL Parametreleri (useParams ve useLocation)

🔹 useLocation ile Sorgu Parametresi Okuma

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

export default function Balina() {
  const { search } = useLocation();
  const match = search.match(/tip=(.*)/);
  const tip = match?.[1];
  return (
    <>
      <h2>Balina Türleri</h2>
      {tip === 'mavi' && <h3>Mavi Balina</h3>}
      {tip === 'katil' && <h3>Katil Balina</h3>}
    </>
  );
}

useLocation, URL’deki ?tip= değerini okumamızı sağlar.

🔹 useParams ile SEO Dostu URL

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

export default function Balina() {
  const { tip } = useParams();
  return (
    <>
      <h2>Balina Türleri</h2>
      {tip === 'mavi' && <h3>Mavi Balina</h3>}
      {tip === 'katil' && <h3>Katil Balina</h3>}
    </>
  );
}

Bu yöntemle /balina/mavi gibi URL’leri daha SEO dostu hale getirirsiniz.

---

5️⃣ İç İçe (Nested) Rotalar

Büyük projelerde alt bileşenleri aynı dosya içinde yönetmek karmaşayı azaltır.

Balina.js

import React from 'react';
import { Link, Route, Switch, useRouteMatch, useParams } from 'react-router-dom';

export default function Balina() {
  const { path, url } = useRouteMatch();

  return (
    <>
      <h2>Balina Türleri</h2>
      <nav>
        <ul>
          <li><Link to={`${url}/mavi`}>Mavi Balina</Link></li>
          <li><Link to={`${url}/katil`}>Katil Balina</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path={`${path}/:tip`}>
          <AltBalinaGosterici />
        </Route>
      </Switch>
    </>
  );
}

function AltBalinaGosterici() {
  const { tip } = useParams();
  return (
    <>
      {tip === 'mavi' && <h3>Mavi Balina</h3>}
      {tip === 'katil' && <h3>Katil Balina</h3>}
    </>
  );
}

useRouteMatch Hook’u, mevcut yolun temelini alarak alt rotalar oluşturmanızı sağlar.

---

🙋‍♀️ Sıkça Sorulan Sorular (SSS)

1. <Link> ile <a> farkı nedir?

<Link>, sayfa yenilenmeden yönlendirme yapar. <a> etiketi tam sayfa yenilemesi tetikler.

2. Switch neden kullanılır?

Yalnızca ilk eşleşen rotayı çalıştırır, çakışmaları önler.

3. exact ne işe yarar?

Rota yolunun birebir eşleşmesini zorunlu kılar. /balina ve /balina/mavi çakışmaz.

4. React Router v6’da fark nedir?

Switch yerine Routes, component yerine element={<Bilesen />} kullanılır.

5. Korumalı Rota nasıl yapılır?

Kullanıcının oturumunu kontrol eden özel bir ProtectedRoute bileşeniyle yönlendirme yapılır.

---

🎯 Sonuç

Artık React Router ile yönlendirme sistemini sıfırdan kurabilir, kullanıcı dostu URL’ler, dinamik rotalar ve iç içe bileşenlerle gelişmiş navigasyonlar oluşturabilirsiniz.

💡 Rabisu Bulut üzerinde GitHub’dan React uygulamanızı kolayca deploy edebilir, yönlendirmeleri canlı olarak test edebilirsiniz.