React Router Kullanımı: Frontend Geliştirme İçin Kapsamlı Rehber
Modern web uygulamaları, tek sayfa uygulamaları (SPA) olarak kullanıcı deneyimini üst seviyeye taşıyan bir navigasyon akışına ihtiyaç duyar. Bu bağlamda yönlendirme ve rotalandırma işlemleri sadece URL değişimini yönetmekten çıkıp, uygulamanın ana akışını oluşturan bir mekanizmaya dönüşür. React ekosistemi bu ihtiyaç için güçlü bir çözüme sahiptir: React Router. Bu rehberde, React Router’ın temellerinden başlayarak ileri düzey konulara kadar ayrıntılı bir yol haritası sunulacak; kurulumu, temel kullanım senaryoları, dinamik parametreler, nested routing, korumalı rotalar, lazy loading ve performans odaklı yaklaşımlar adım adım ele alınacaktır. İçerik, uygulamalı örnekler ve pratik ipuçları ile zenginleştirilmiştir.
React Router’a Giriş ve Temel Kavramlar
React Router, URL değişikliklerini yakalayarak bileşen ağacını buna göre güncelleyen bir yönlendirme kütüphanesidir. React ile birlikte SPA mimarisinde sayfa yüklemesi olmadan gezinmeyi mümkün kılar. İlk aşamada temel kavramlar şunlardır: route (rota), link (bağlantı), konum (location) ve bağlantı durumu (history). Temelde her rota, bir URL deseni ile ilişkilendirilmiş bir React bileşenidir ve kullanıcının tarayıcı adres çubuğunda bir değişiklik yapmasıyla eşleşen bileşen render edilir.
Günümüzde yaygın olarak kullanılan sürüm olan React Router v6 ile Routes ve Route bileşenleri üzerinden yapılandırma yapılır. Bu sürüm, daha sade bir API ve yeni yaklaşım olan route objects veya element üzerinden yapılandırma sunar. Ayrıca useNavigate, useParams, useLocation gibi hook’lar ile rotalar arası etkileşim ve konum bilgisine kolay erişim sağlanır.
Kurulum ve İlk Adımlar
Bir proje üzerinde React Router’ı kullanmaya başlamadan önce bağımlılıkları eklemek gerekir. Aşağıdaki komutlar, Create React App veya benzeri bir proje yapısında çalışır durumda olan bir React uygulamasına uygulanabilir:
npm install react-router-dom@6
# veya
yarn add react-router-dom@6Sonrasında kök seviyesinde BrowserRouter bileşeni ile uygulama sarmalanır ve Routes ile tanımlanan rotalar kullanıma hazır hale gelir. Basit bir örnek aşağıdaki gibidir:
import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
function Home() {
return Ana Sayfa
;
}
function About() {
return Hakkında
;
}
export default function App() {
return (
);
}
Bu örnek, temel bir gezinme akışını ve iki basit bileşenin nasıl yönlendirme ile eşleştiğini gösterir. Routes kapsayıcısı, Route öğelerinin hangi URL’lerle eşleşeceğini belirler ve her Route için bir element özelliği ile render edilecek bileşen ifade edilir.
Dinamik Parametreler ve Yol Yapılandırması
Gerçek dünya uygulamalarında kullanıcıya özgü içerikler göstermek için dinamik parametreler kullanılır. Örneğin bir ürün sayfasında ürün kimliği URL içerisinde yer alabilir. Bu durumda rota yapılandırması şu şekilde genişletilir:
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';
function Product() {
const { id } = useParams();
return Ürün Detayları: {id};
}
export default function App() {
return (
);
}
useParams(), rota deseninde bulunan parametreleri okumak için kullanılır. Bu sayede kullanıcı bir ürüne ait sayfayı ziyaret ettiğinde, o ürün için ilgili veriyi sunucudan veya önbellekten çekip göstermek mümkün olur. Ayrıca parametreye bağlı render mantığını, bileşenlerin yeniden render edilmesini engelleyecek şekilde optimize etmek performans açısından değerlidir.
Birden çok parametre veya zorunlu/opsiyonel parametreler için esnek bir yapı kurmak önemlidir. Örneğin, ürün sayfası yanında kategori filtreleri için sorgu parametreleri de kullanılarak URL’ler şu şekilde genişletilebilir: /products?category=electronics&page=2. Bu tür durumlarda useLocation() ile arama parametreleri okunabilir ve yakalanabilir.
İç İçe (Nested) Rotlar ve Hiyerarşik Yapı
Bir uygulama genellikle ana bölüm ve alt bölümlerden oluşan bir hiyerarşiye sahiptir. Nested routes, bu yapıyı URL yapısına yansıtmanın etkili bir yoludur. Örneğin, bir kullanıcı profil sayfasında alt sekmeler veya alt sayfalar olabilir. Bu durumda, üst bileşen kendi içindeki Routes içinde alt rotaları tanımlar:
function UserLayout() {
return (
Kullanıcı Paneli
);
}
Bu yapı, kullanıcı sayfasını bir kapsayıcı (layout) içerisinde toplayır ve içteki alt rotalar, ilgili içerikleri Outlet üzerinden render eder. Outlet, alt rotaların yerleştirileceği alanı temsil eder ve kullanıcı arayüzünde doğal bir akış sağlar. Nested routing, kullanıcı deneyimini zenginleştirir ve URL yapısını temiz tutar.
Ağır Yüklemeli Uygulamalarda Lazy Loading ve Suspense
Günümüz uygulamaları, başlangıç yüklemesini olabildiğince hızlı tutmak için sayfaları ve rota bileşenlerini tembel yükleme (lazy loading) ile yükler. Bu yaklaşım, yalnızca kullanıcı ilgili rotaya gittiğinde o bileşenin yüklenmesini sağlar. React Router ile birlikte React.lazy ve Suspense kullanılarak bu mümkün olur. Aşağıdaki örnek, route tabanlı lazy loading’i gösterir:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
export default function App() {
return (
Yükleniyor...}>
);
}
Suspense bileşeni, lazy yüklenen içeriğin hazır olmadığı anlarda gösterilecek geri dönüşü belirler. Bu mekanizma, kullanıcıya kesintisiz bir deneyim sunarken bundle boyutunu da küçültür. Ayrıca, route level code splitting ile her rota için ayrı bundle’lar oluşturulur ve yalnızca gerekli olanlar indirilebilir.
Koruma ve Erişim Kontrolleri: Korunaklı Rotlar
Bir uygulamada kimlik doğrulama gerektiren sayfalara erişimi sınırlamak önemli bir güvenlik ve kullanıcı deneyimi konusudur. React Router ile korumalı rotaları kolayca yapılandırabilirsiniz. Yaygın bir yaklaşım, kullanıcı oturumu mevcutsa belirli rotalara yönlendirmek ve aksi halde giriş sayfasına yönlendirmektir. Basit bir örnek:
import { Navigate, Outlet } from 'react-router-dom';
function PrivateRoute({ isAuthenticated }) {
return isAuthenticated ?
);
}
Bu yaklaşım, kullanıcı durumunu temel alarak dinamik olarak erişim kontrolü sağlar. Kullanıcı oturum açmadıysa, yetkisiz erişim talepleri otomatik olarak yönlendirilir ve güvenli alanlar korunur. Ayrıca useLocation ve query parametreleri ile kullanıcı hedefe yaklaşırken gezinim akışı üzerinde daha ince kontroller uygulanabilir.
Veri Yükleme ve Yönlendirme: useNavigate ve useLocation
Router kullanımı ile yönlendirmeler sadece linkler üzerinden yapılmaz; programatik yönlendirme de önemli bir rol oynar. useNavigate ile kullanıcı etkileşimleri sonucunda sayfalar arası geçişler tetiklenebilir. Örneğin bir form başarıyla submit olduğunda kullanıcıyı bir son sayfaya yönlendirmek mümkün olur:
import { useNavigate } from 'react-router-dom';
function FormSuccess() {
const navigate = useNavigate();
React.useEffect(() => {
navigate('/dashboard', { replace: true });
}, [navigate]);
return null;
}
useLocation ise mevcut konum bilgisine erişim sağlar; sorgu parametreleri, hash fragment ve diğer yol bilgisini okuyabiliriz. Özellikle kullanıcı akışını kaybettikten sonra geri dönüş noktalarını belirlemek için kullanışlıdır. Örneğin, kullanıcı giriş yaptığında önceki hedefi hatırlamak için kullanılır.
Yönlendirme davranışını kullanıcı deneyimini bozmadan yönetebilmek için, tarayıcı geçmişini yönetme stratejileri üzerinde düşünmek gerekir. replace seçeneği ile yönlendirme yapılırken geçmişe bir adım eklenmez ve kullanıcı geri butonuna bastığında önceki sayfaya dönemez; bu, akışın bozulmaması için tercih edilebilen bir yaklaşımdır.
Hata Yakalama ve Yedekleme: Hata Sayfaları ve Rota Tasarımı
Bir rota yapılandırmasında, istenmeyen URL’ler veya hata durumları için kullanıcıya bilgilendirici ve yönlendirme sağlayan hata sayfaları tasarlamak önemlidir. React Router’da, bilinmeyen rotalar için bir catch-all yolunu tanımlamak, kullanıcı deneyimini iyileştirir. Ayrıca bir hata sınırını (error boundary) kullanarak rota içeriklerinde oluşabilecek çökmeleri kontrollü bir şekilde ele almak da mümkündür.
function NotFound() {
return Sayfa bulunamadı
;
}
export default function App() {
return (
);
}
Rota tasarımında, içeriklerin yüklenmesi sırasında oluşabilecek gecikmeleri yönetmek için lifecycle benzeri davranışları düşünmek gerekir. Özellikle data fetching işlemleri, kullanıcıya gereksiz bekleme süresi yaşatmadan, parça parça yüklenebilir hale getirilmelidir. Bu durum, kullanıcının sayfa üzerinde gezinmesini kesintiye uğratmaz ve yüklenme durumlarını net bir şekilde iletir.
Geliştirme ve Test İçin İpuçları
Bir rota mimarisini geliştirirken ve test ederken göz önünde bulundurulması gereken birkaç pratik ipucu vardır. Bunlar, kullanıcı deneyimini bozmadan hataları yakalamaya, performansı optimize etmeye ve kod okunabilirliğini artırmaya yöneliktir.
- Rota Dosyalarını Modülerleştirme: Rotaları kendi dosya yapınız içinde mantıksal olarak gruplandırın. Örneğin ana routes.ts içinde tüm rotalar, ancak alt modüller için ayrı dosyalar kullanın. Bu, proje büyüdükçe bakımı kolaylaştırır.
- Tipler ve Prop Türleri: Özellikle büyük projelerde TypeScript kullanımı, hataların erken aşamada yakalanmasını sağlar. Route 객체leri üzerinde tip tanımları ile hatalı yapılandırmaları engelleyin.
- Performans İzleme: İlk yükleme ve geçişler sırasında performans ölçümleri için browser konsolundaki Network ve Performance sekmelerini düzenli olarak kullanın. Lazy loading ile chunk boyutlarını analiz edin.
- Erişilebilirlik: Navigasyon için klavye odağı ve ARIA etiketlerini unutmayın. Link ve yönlendirme bileşenleri, ekran okuyucular için net ve anlatımlı olmalıdır.
- Test Stratejisi: En azından temel rotaların erişilebilirliğini ve yönlendirme akışını kapsayan birim testleri yazın. Cypress veya React Testing Library ile kullanıcı akışını simüle edin.
LSI ve Trend Kelimelerle Doğal İçerik Oluşturma
Güncel içerik oluştururken, kullanıcıların gerçek ihtiyaçlarını hedeflemek önemli. Doğal olarak benimsenmiş LSI (Latent Semantic Indexing) odaklı anahtar kavramlar, içeriğin konusunu genişletir ve arama motorlarında daha iyi bağlam sağlar. Bu kapsamda, meta bilgi olmadan da içerik içinde şu tür kavramlar doğal akışla yer alır:
- SPA navigasyonu, istemci tarafı yönlendirme
- Route parametreleri, dinamik URLler
- Nested routes, kapsayıcı layout
- Code splitting, lazy loading, Suspense
- Programatik yönlendirme, useNavigate
- Güvenli rotalar, korumalı alanlar
- Hata yönetimi, Not Found sayfaları
- Performans optimizasyonu, bundle boyutu
Bu kavramlar, yazının akışını zenginleştirir ve kullanıcıya değerli teknik bilgiler sağlar. İçerik boyunca, gerçek dünyadan örneklerle bu kavramların nasıl uygulandığını gösteren kod parçaları ve neden-sonuç ilişkileriyle birleştirilir.
Örnek Proje Akışında React Router Kullanımı
Bir örnek projeyi düşünelim: bir e-ticaret yanı sıra bir kullanıcı hesabı bölümü olan bir SaaS paneli. Ana navigasyon ana sayfa, ürünler, kullanıcı hesabı ve destek gibi bölümlerden oluşur. Ürünler sayfasında kategori filtresi ve ürün detay sayfası gerekir. Kullanıcı hesabında Profil, Settings ve Order History gibi alt sayfalar bulunur. Bu durumlar için nested routing, dinamik parametreler ve korumalı rotalar bir araya getirildiğinde, kullanıcı akışı temiz ve ölçeklenebilir bir mimari elde edilir.
Bu akışa uygun olarak, ana bileşenler şu şekilde yapılandırılabilir:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
// Ana sayfa, ürünler ve kullanıcı alanı için ana kapsayıcılar
function HomePage() { /* ... */ }
function ProductsPage() { /* ... */ }
function ProductDetail() { /* ... */ }
function UserPanel() { /* ... */ }
function UserProfile() { /* ... */ }
function UserSettings() { /* ... */ }
export default function App() {
return (
);
}
Bu yapı, ana gezinmeyi net bir şekilde belirler ve her bölüm için gerekli alt rotaları kapsar. Ürün detayı sayfasında, useParams ile ürün kimliği alınır ve bu kimlik üzerinden ilgili veriler API’dan çekilir. Kullanıcı panelinde ise kullanıcı deneyimini kesintiye uğratmamak için korumalı rotalar ve Not Found sayfaları kullanıcının güvenliğini sağlar.
Performans ve Erişilebilirlik Entegrasyonu
React Router’ın kullanımı, yalnızca navigasyonu değil, performans ve erişilebilirliği de doğrudan etkiler. Performans için lazy loading ve Suspense ile bileşenleri ihtiyaç duyulana kadar yüklemek önemli. Erişilebilirlik için, yönlendirme elementlerinde net içerik ve klavye gezinti akışını sağlamak gerekir. İleri düzey uygulamalarda, yönlendirme ile ilgili olaylar için ARIA rol ve açıklamalarını doğru kullanmak, ekran okuyucular için içeriğin net anlaşılmasını sağlar.
Özet olarak, React Router kullanımı sadece navigasyonu yönetmek değildir; aynı zamanda kullanıcı deneyimini iyileştiren, performansı artıran ve erişilebilirliği güçlendiren bir mimari çalışmasıdır. Doğru yapılandırılmış rotalar, dinamik parametreler ve korumalı alanlar ile uygulamanın güvenliğini ve kullanıcı memnuniyetini artırmak mümkündür.
