M

MLOG

Türkçe

React Router v6 ile temel navigasyon modellerini keşfedin. Sağlam ve kullanıcı dostu web uygulamaları oluşturmak için bildirimsel yönlendirme, dinamik yollar, programatik navigasyon, iç içe yollar ve veri yükleme stratejilerini öğrenin.

React Router v6: Modern Web Uygulamaları için Navigasyon Modellerinde Uzmanlaşma

React Router v6, React uygulamaları için güçlü ve esnek bir yönlendirme (routing) kütüphanesidir. Tam sayfa yenilemeleri olmadan navigasyonu yöneterek kusursuz bir kullanıcı deneyimi ile tek sayfa uygulamalar (SPA) oluşturmanıza olanak tanır. Bu blog yazısı, React Router v6 kullanarak temel navigasyon modellerini derinlemesine inceleyecek ve size sağlam ve kullanıcı dostu web uygulamaları oluşturmak için gerekli bilgi ve örnekleri sunacaktır.

React Router v6 Temel Kavramlarını Anlama

Belirli modellere dalmadan önce, bazı temel kavramları gözden geçirelim:

1. <Routes> ve <Route> ile Bildirimsel Yönlendirme

React Router v6'nın temeli bildirimsel yönlendirmeye dayanır. Rotalarınızı <Routes> ve <Route> bileşenlerini kullanarak tanımlarsınız. <Routes> bileşeni rotalarınız için bir kapsayıcı görevi görürken, <Route> bileşeni belirli bir rotayı ve bu rota mevcut URL ile eşleştiğinde oluşturulacak bileşeni tanımlar.

Örnek: Temel Rota Yapılandırması

İşte basit bir uygulama için rotaların nasıl kurulacağına dair temel bir örnek:


import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

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

export default App;

Bu örnekte, üç rota tanımlıyoruz:

BrowserRouter bileşeni, tarayıcı geçmişi tabanlı yönlendirmeyi etkinleştirir. React Router, mevcut URL'yi tanımlanan rotalarla eşleştirir ve ilgili bileşeni oluşturur.

2. URL Parametreleri ile Dinamik Yollar

Dinamik yollar, URL'de farklı değerleri işleyebilen rotalar oluşturmanıza olanak tanır. Bu, bir ürün ID'si veya kullanıcı ID'si gibi benzersiz bir tanımlayıcıya dayalı içerik görüntülemek için kullanışlıdır. React Router v6, URL parametrelerini tanımlamak için : sembolünü kullanır.

Örnek: Ürün Detaylarını Görüntüleme

Bir e-ticaret uygulamanız olduğunu ve her ürünün detaylarını ID'sine göre görüntülemek istediğinizi varsayalım. Şöyle bir dinamik rota tanımlayabilirsiniz:


import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // productId'ye göre ürün detaylarını çek
  // ...

  return (
    

      
Ürün Detayları

      
Ürün ID: {productId}

      {/* Ürün detaylarını burada göster */}
    

  );
}

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

export default App;

Bu örnekte:

Uluslararasılaştırma Örneği: Dil Kodlarını Yönetme

Çok dilli bir web sitesi için, dil kodlarını yönetmek üzere dinamik bir rota kullanabilirsiniz:


} />

Bu rota /en/about, /fr/about ve /es/about gibi URL'lerle eşleşir. lang parametresi daha sonra uygun dil kaynaklarını yüklemek için kullanılabilir.

3. useNavigate ile Programatik Navigasyon

Bildirimsel yönlendirme statik bağlantılar için harika olsa da, genellikle kullanıcı eylemlerine veya uygulama mantığına dayalı olarak programatik olarak gezinmeniz gerekir. React Router v6, bu amaçla useNavigate hook'unu sağlar. useNavigate, farklı rotalara gitmenizi sağlayan bir fonksiyon döndürür.

Örnek: Form Gönderiminden Sonra Yönlendirme

Bir form gönderiminiz olduğunu ve form başarıyla gönderildikten sonra kullanıcıyı bir başarı sayfasına yönlendirmek istediğinizi varsayalım:


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

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

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Form verilerini gönder
    // ...

    // Başarılı gönderimden sonra başarı sayfasına yönlendir
    navigate("/success");
  };

  return (
    

      {/* Form alanları */}
      
    

  );
}

export default MyForm;

Bu örnekte:

Navigasyon Sırasında Durum (State) Aktarma

Ayrıca navigate fonksiyonunun ikinci argümanını kullanarak navigasyonla birlikte durum (state) da aktarabilirsiniz:


navigate("/confirmation", { state: { orderId: "12345" } });

Bu, hedef bileşene veri aktarmanıza olanak tanır ve bu veriye useLocation hook'u kullanılarak erişilebilir.

4. İç İçe Yollar ve Düzenler (Layouts)

İç içe yollar, bir rotanın diğerinin içine yerleştirildiği hiyerarşik yönlendirme yapıları oluşturmanıza olanak tanır. Bu, birden çok navigasyon seviyesine sahip karmaşık uygulamaları düzenlemek için kullanışlıdır. Bu, belirli kullanıcı arayüzü öğelerinin uygulamanın bir bölümünde tutarlı bir şekilde mevcut olduğu düzenler (layouts) oluşturmaya yardımcı olur.

Örnek: Kullanıcı Profili Bölümü

Kullanıcının profil bilgilerini, ayarlarını ve siparişlerini görüntülemek için iç içe yollara sahip bir kullanıcı profili bölümünüz olduğunu varsayalım:


import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
Kullanıcı Profili

      
    
        
  • 
          Profil Bilgileri
        
    • 
        
  • 
          Ayarlar
        
    • 
        
  • 
          Siparişler
        
    • 
      


      
        } />
        } />
        } />
      
    

  );
}

function ProfileInformation() {
  return 
Profil Bilgileri Bileşeni
;
}

function Settings() {
  return 
Ayarlar Bileşeni
;
}

function Orders() {
  return 
Siparişler Bileşeni
;
}

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

export default App;

Bu örnekte:

Ana rotadaki * işareti çok önemlidir; bu, ana rotanın herhangi bir alt yolla eşleşmesi gerektiğini belirtir ve iç içe yolların Profile bileşeni içinde doğru şekilde eşleşmesini sağlar.

5. "Bulunamadı" (404) Hatalarını Yönetme

Kullanıcının var olmayan bir rotaya gitmesi durumlarını ele almak önemlidir. React Router v6, bunu her şeyi yakalayan bir rota ile kolaylaştırır.

Örnek: Bir 404 Sayfası Uygulama


import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Bulunamadı

      
Aradığınız sayfa mevcut değil.

      Ana sayfaya dön
    

  );
}

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

Bu örnekte:

6. React Router v6 ile Veri Yükleme Stratejileri

React Router v6, selefi (React Router v5 ve `useRouteMatch`) gibi yerleşik veri yükleme mekanizmaları içermez. Ancak, çeşitli veri yükleme stratejilerini etkili bir şekilde uygulamak için araçlar sağlar.

Seçenek 1: Bileşenlerde Veri Çekme

En basit yaklaşım, rotayı oluşturan bileşenin içinde doğrudan veri çekmektir. Bileşen yüklendiğinde veya URL parametreleri değiştiğinde veri çekmek için useEffect hook'unu kullanabilirsiniz.


import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP hatası! durum: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Yükleniyor...
;
  if (error) return 
Hata: {error.message}
;
  if (!product) return 
Ürün bulunamadı
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

Bu yaklaşım basittir ancak birden çok bileşende veri çekmeniz gerekiyorsa kod tekrarına yol açabilir. Ayrıca, veri çekme işlemi yalnızca bileşen yüklendikten sonra başladığı için daha az verimlidir.

Seçenek 2: Veri Çekme için Özel bir Hook Kullanma

Kod tekrarını azaltmak için, veri çekme mantığını kapsayan özel bir hook oluşturabilirsiniz. Bu hook daha sonra birden çok bileşende yeniden kullanılabilir.


import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP hatası! durum: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Daha sonra, bu hook'u bileşenlerinizde kullanabilirsiniz:


import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Yükleniyor...
;
  if (error) return 
Hata: {error.message}
;
  if (!product) return 
Ürün bulunamadı
;

  return (
    

      
{product.name}

      
{product.description}

    

  );
}

export default ProductDetails;

Seçenek 3: Veri Çekme Yeteneklerine Sahip Bir Yönlendirme Kütüphanesi Kullanma (TanStack Router, Remix)

TanStack Router ve Remix gibi kütüphaneler, yönlendirme ile sorunsuz bir şekilde entegre olan yerleşik veri çekme mekanizmaları sunar. Bu kütüphaneler genellikle şu gibi özellikler sağlar:

Böyle bir kütüphane kullanmak, özellikle karmaşık uygulamalar için veri yüklemeyi önemli ölçüde basitleştirebilir ve performansı artırabilir.

Sunucu Taraflı Oluşturma (SSR) ve Statik Site Oluşturma (SSG)

Daha iyi SEO ve ilk yükleme performansı için, Next.js veya Gatsby gibi çerçevelerle SSR veya SSG kullanmayı düşünün. Bu çerçeveler, sunucuda veya derleme zamanında veri çekmenize ve istemciye önceden oluşturulmuş HTML sunmanıza olanak tanır. Bu, istemcinin ilk yüklemede veri çekme ihtiyacını ortadan kaldırarak daha hızlı ve SEO dostu bir deneyim sağlar.

7. Farklı Yönlendirici (Router) Türleriyle Çalışma

React Router v6, çeşitli ortamlara ve kullanım durumlarına uygun farklı yönlendirici uygulamaları sunar:

Uygulamanızın gereksinimlerine ve ortamına en uygun yönlendirici türünü seçin.

Sonuç

React Router v6, React uygulamaları için kapsamlı ve esnek bir yönlendirme çözümü sunar. Bu blog yazısında tartışılan navigasyon modellerini anlayarak ve uygulayarak, sağlam, kullanıcı dostu ve sürdürülebilir web uygulamaları oluşturabilirsiniz. <Routes> ve <Route> ile bildirimsel yönlendirmeden URL parametreleriyle dinamik yollara, useNavigate ile programatik navigasyona ve etkili veri yükleme stratejilerine kadar, React Router v6, kullanıcılarınız için kusursuz navigasyon deneyimleri oluşturmanıza olanak tanır. Daha da fazla kontrol ve performans optimizasyonu için gelişmiş yönlendirme kütüphanelerini ve SSR/SSG çerçevelerini keşfetmeyi düşünün. Bu modelleri özel uygulama gereksinimlerinize uyarlamayı ve her zaman net ve sezgisel bir kullanıcı deneyimine öncelik vermeyi unutmayın.