React Router ile sayfa yönlendirme: rotalardan gezinmeye

İstemci taraflı yönlendirme ne demektir?

Tek sayfalık bir React uygulamasında tarayıcı, uygulamanın kabuğunu bir kez yükler. Kullanıcı bir bağlantıya tıkladığında sunucudan yeni sayfa istenmez; adres çubuğu güncellenir ve React hangi bileşenin gösterileceğine karar verir. Bu karar mekanizmasına istemci taraflı yönlendirme (client-side routing) denir. React Router, bu işi yapan en yaygın kütüphanelerden biridir.

React Router'ın temel kavramları şunlardır: URL'yi bileşene eşleyen rota tanımları, adres değişimini sağlayan bağlantılar ve URL'den veri okuyan hook'lar. Aşağıdaki anlatım kütüphanenin bildirimsel (declarative) kullanım biçimine dayanır. Kütüphane başka modlar da sunar; mevcut projenizin hangi modu kullandığını önce kontrol edin.

Kurulum ve ilk rotalar

Uygulamayı bir yönlendirici bileşeniyle sarmalayıp rotaları tanımlarsınız:

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

root.render( <BrowserRouter> <Routes> <Route path="/" element={<Anasayfa />} /> <Route path="hakkimizda" element={<Hakkimizda />} /> </Routes> </BrowserRouter> );

BrowserRouter tarayıcının adres geçmişini kullanır. Routes, mevcut URL'ye uyan rotayı seçer; her Route bir yol (path) ve gösterilecek bileşeni (element) tanımlar. Projenizin kurulu sürümüne göre içe aktarma kaynağı react-router ya da react-router-dom olabilir; kendi sürümünüzün belgesini kontrol edin.

İç içe rotalar, Outlet ve ortak düzen

Birden çok sayfanın ortak bir düzeni (üst menü, kenar çubuğu) paylaştığı durumlarda rotaları iç içe tanımlayın:

<Routes> <Route path="panel" element={<PanelDuzeni />}> <Route index element={<PanelOzeti />} /> <Route path="ayarlar" element={<Ayarlar />} /> </Route> </Routes>

Üst rotanın yolu çocuk rotaların başına eklenir; yukarıdaki yapı panel ve panel/ayarlar adreslerini üretir. Üst bileşen, çocuk rotanın içeriğini Outlet ile gösterir:

function PanelDuzeni() { return ( <div> <header>Panel</header> <Outlet /> </div> ); }

index rotası, üst rotanın kendi adresinde gösterilen varsayılan çocuktur. Yolu olmayan bir Route, adrese bölüm eklemeden yalnızca düzen sağlar. Yolu olup element'i olmayan bir Route ise çocuklarına yol öneki verir. Bu biçimler, büyük bir yönetim paneli rota ağacını sade tutmanın temelidir.

Dinamik parametreler ve sorgu parametreleri

Adreste değişen kısımlar için : ile başlayan bölüm kullanılır:

<Route path="products/:productId" element={<ProductDetail />} />

function ProductDetail() { const { productId } = useParams(); // productId ile veriyi getir }

Seçmeli bölüm için sona ? eklenir; kalan tüm adresi yakalamak için * kullanılır. Yakalama (splat) rotası, tanımlanmamış adresler için özel bir bulunamadı sayfası göstermenin yoludur. Rota listesinin sonuna şöyle eklenir: <Route path="*" element={<Bulunamadi />} />. Kullanıcı yanlış bir adres yazdığında boş ekran yerine anlaşılır bir sayfa ve anasayfaya dönüş bağlantısı görür.

Filtre ve sekme gibi adres çubuğundaki arama parametreleri için useSearchParams hook'u kullanılır:

const [searchParams, setSearchParams] = useSearchParams(); const sekme = searchParams.get("sekme"); setSearchParams({ sekme: "ozet" });

Parametreleri doğrudan değiştirmeyin; yalnızca setSearchParams ile güncelleyin, çünkü çağrı bir gezinme başlatır ve adres çubuğu güncellenir. Yol parametreleri varlığı tanımlar (hangi ürün), sorgu parametreleri ise görünümü (hangi sekme, hangi filtre) tanımlar; ikisini karıştırmamak paylaşılabilir adresler üretir.

Gezinme: Link, NavLink ve useNavigate

Kullanıcı etkileşimiyle gezinme için Link kullanın:

<Link to="/products">Ürünler</Link>

Menülerde aktif sayfayı vurgulamak için NavLink kullanın; aktif olduğunda otomatik olarak active sınıfı alır, className ve style özelliklerine isActive alan bir fonksiyon da verilebilir:

<NavLink to="/panel" className={({ isActive }) => (isActive ? "secili" : "")} > Panel </NavLink>

useNavigate, kullanıcı etkileşimi olmadan yapılan gezinmeler içindir: form başarıyla gönderildikten sonra panele yönlendirmek gibi. Bağlantı için Link ya da NavLink tercih edin; bunlar klavye desteği, erişilebilirlik ve yeni sekmede açma gibi davranışları da sağlar. Düğme ile navigate çağırmak bunları kaybettirir.

const navigate = useNavigate(); // form başarılı olunca navigate("/panel");

Örnek rota yapısı: oturum gerektiren bir panel

Örneğin bir müşteri portalında giriş sayfası herkese açık, panel sayfaları ise oturum gerektirsin. Rota ağacı şu mantıkla kurulur: giriş ve anasayfa kök düzeyde, panel altındaki tüm sayfalar ise yolu olmayan bir düzen rotasının çocukları olarak tanımlanır. Bu düzen bileşeni kullanıcının oturum durumuna bakar; oturum yoksa kullanıcıyı giriş sayfasına yönlendirir, varsa Outlet ile altındaki sayfayı gösterir.

Böylece oturum kontrolü her sayfada tekrarlanmaz, tek yerde yapılır. Yönlendirme için React Router'ın Navigate bileşeni kullanılabilir; ayrıntılar kütüphanenin API belgesindedir. Oturum bilgisini ağaç boyunca taşımak için genellikle Context kullanılır.

Bu tür bir yapıda şu soruları baştan yanıtlayın: hangi rotalar herkese açık, hangileri korumalı? Bulunamayan adres için ne gösterilecek? Kullanıcı giriş yaptıktan sonra gitmek istediği sayfaya geri dönecek mi?

Sık yapılan hatalar

• Düğmeye onClick ile navigate bağlamak; Link kullanılabilecek yerde erişilebilirliği kaybetmek.
• Link yerine düz a etiketi kullanmak: tarayıcı sayfayı tamamen yeniden yükler ve uygulama durumu kaybolur.
• İç içe rotada Outlet'i unutmak; çocuk sayfa hiç görünmez.
• Mutlak ve göreli yolları karıştırmak: eğik çizgiyle başlayan yol kökten, başlamayan yol üst rotadan devam eder.
• Dinamik parametrenin metin olarak geldiğini unutmak ve sayı karşılaştırması yapmak.
• Sunucuda tüm adreslerin uygulama kabuğuna yönlendirilmesini ayarlamamak; doğrudan adres yazıldığında ya da sayfa yenilendiğinde bulunamadı hatası alınır.

Bu beceriyi Mindset programlarında nerede çalışırsınız?

Modern Web Geliştirme, Frontend (React) programındaki "Routing ve Sayfa Mimarisi" modülü bu konuyu işler; "Bileşen Mimarisi ve Props Sistemi" ve "Global State Yönetimi" modülleri sayfaların kendi içindeki yapıyı tamamlar. React'e yeni geçen geliştiriciler ve çok sayfalı bir yönetim paneli ya da portal geliştirecek ön yüz ekipleri için uygundur.

Kurumsal ekiplerde rota yapısı, korumalı sayfalar ve ortak düzen konusunda proje standardı oluşturmak için kullanılabilir; bu standart, farklı ekiplerin aynı portalda çalışırken uyumu korumasına yardım eder.