Buse Savaş
17 July 2025
React Router ile Sayfa Geçişleri
Modern web uygulamaları, özellikle SPA (Single Page Application - Tek Sayfa Uygulama) mimarisiyle birlikte sayfa geçişlerini çok daha kullanıcı dostu hale getirdi. Kullanıcılar farklı sayfalara tıkladıklarında, arka planda tam sayfa yenilenmesi yapılmadan sadece içerikler güncellenir. Bu hızlı ve akıcı deneyimi sağlayan en popüler araçlardan biri de React Router kütüphanesidir.
Bu yazıda, React Router kullanarak sayfalar arası geçişin nasıl yapılandırıldığını, hangi bileşenlerin ve hook’ların kullanıldığını, ayrıca dinamik URL parametreleri, 404 yönlendirmeleri ve navigasyon menüsü oluşturma gibi konulardan bahsedeceğiz.
React Router Nedir?
React Router, URL’lere göre bileşenlerin görüntülenmesini sağlayarak birden fazla sayfa hissiyatı yaratan bir yönlendirme sistemidir. Tarayıcı adres çubuğundaki değişikliklere göre uygulamanın içeriğini değiştiren bu yapı, kullanıcıların farklı sayfalar arasında hızlı ve akıcı bir şekilde gezinmesine olanak tanır. Sayfa yenilemeden gezinmeyi sağlar, gömülü yani bir diğer adıyla nested sayfalar oluşturmayı sağlar ve hatalı sayfalar için 404 yönlendirmesi yapabilmeyi sağlar.
1.Kurulum ve Başlangıç
React Router’ı kullanmaya başlamak için öncelikle ilgili paketi yüklemek gerekir:
npm install react-router-domAna Yapı:
Kurulumdan sonra BrowserRouter, Routes, Route gibi bileşenler kullanılarak yönlendirme yapılandırılır. Ve import edilir:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";Router sarmalı içinde Routes ve onun içinde
<Route path='/anasayfa' element={<Dashboard/>} /> şeklinde kullanılarak istediğimiz yönlendirmeyi yapabiliriz.
2.Link ve useNavigate
Kullanıcıyı bir sayfaya yönlendirmek için Link bileşeni kullanılır. Bu, <a> etiketinden farklı olarak sayfanın tamamen yeniden yüklenmesini engeller.import { Link } from "react-router-dom" şeklinde import edilir. Ve yine <Link to="/anasayfa"/>Anasayfa</Link> şeklinde kullanılır.
Programatik yönlendirme örneğin form gönderimi sonrası için ise useNavigate kullanılabilir. import { useNavigate } from "react-router-dom" şeklinde import edilir. const navigate = useNavigate() olarak tanımlanır ve daha sonrasında herhangi bir fonksiyonun içinde navigate("/anasayfa") yazıp kullanarak bir butona onClick ile gönderebiliriz. Bu kullanım genellikle onClick, onSubmit gibi olaylarla birlikte tercih edilir. Bu sayede kullanıcılar arayüzden başka bir sayfaya geçerken sayfa reload olmaz ve performans kaybı yaşanmaz.
3.useParams ile Dinamik URL Kullanımı
URL yapılarında örneğin /urun/123 gibi adreslerle ilgili detay veriye erişmek için useParams hook’u kullanılır. <Route path="/urun/:id" element={<UrunDetay />} /> Bu şekilde detay sayfamızı getirebiliriz. Bu sayede detay sayfalarında dinamik veri gösterimi yapılabilir.
4.Hatalı Sayfalar: 404
Tanımsız URL’ler için özel bir “Sayfa Bulunamadı” bileşeni tanımlanabilir:
<Route path="*" element={<NotFound />} />Bu kullanım sayesinde kullanıcılar boş veya tanımsız sayfalarda uygun bir bilgilendirme mesajıyla karşılaşır.
5.Navigasyon Menüsü
Projelerde genellikle üst kısımda bir menü bulunur. Bu menüyü React Router ile çok fonksiyonel bir şekilde oluşturabilirsiniz .
Örnek bir Navbar bileşeni oluşturup <Link>'ler ile gezinti sağlayabilirsiniz. Bu yapı sayesinde uygulamanızda sade ve hızlı çalışan bir menü oluşturabilirsiniz.
Sonuç
React Router, modern web uygulamalarında kullanıcı deneyimini iyileştirmek için olmazsa olmaz bir araçtır. Tek sayfa uygulamalarında sayfa geçişlerini yönetmek, URL üzerinden veri taşımak, erişim kontrolü sağlamak gibi birçok ihtiyaca esnek çözümler sunar. Küçük bir blog sitesi de olsa büyük bir yönetim paneli de olsa React Router ile sağlam bir yönlendirme yapısı kurmak mümkündür.