React Router, sayfa yönlendirmeleri yapmak için kullanılan bir JavaScript kütüphanesidir Uygulamanızı tamamen SPA haline getirir, sayfaların yeniden yüklenmesini engeller ve kullanıcı dostu hale getirir Nesting Routing, birden fazla seviyeli yönlendirmeyi mümkün kılar ve büyük uygulamaların yönlendirme işlemlerini yönetmek için yararlıdır BrowserRouter, Route, Switch ve Redirect bileşenleri kullanılarak yapılır Link bileşeni kullanarak sayfalar arasında gezinmek mümkündür Path parametreleri ile dinamik sayfa yönlendirmesi yapılabilir
React Router, React uygulamalarında sayfa yönlendirmeleri yapmak için kullanılan bir JavaScript kütüphanesidir. React ile birlikte kullanıldığında, uygulamanızı tamamen SPA (Tek Sayfa Uygulaması) haline getirir, böylece navigation işlemleri yaparken sayfaların yeniden yüklenmesi engellenir.
React Router, uygulamanın URL'sini kullanarak belli sayfaları render etme, URL manipülasyonu, sayfalar arasında gezinti yapma, dinamik URL oluşturma gibi işlemler yapmanızı sağlar. Bu sayede, SPA'lar daha kullanıcı dostu hale gelir ve web uygulamaları daha hızlı çalışır.
Nesting Routing Nedir?
Nesting Routing, React Router'ın temel özelliklerinden biridir ve birden fazla seviyeli yönlendirmeyi mümkün kılar. Yani, bir ana sayfayı alt sayfalarla gruplandırıp, her bir alt sayfaya özgü yönlendirmeler yapabilirsiniz.
Bu özellik, büyük ve karmaşık uygulamaların yönlendirme işlemlerini yönetmek için oldukça yararlıdır. Örneğin, bir e-ticaret sitesi için, bir kategori sayfasının altında birden fazla ürün sayfası bulunabilir. Bu ürün sayfalarına yönlendirme yapmak Nested Routing kullanmanızı gerektirebilir.
Nasıl Yapılır?
React Router'ın sunduğu en önemli özelliklerden biri nesting routing'dir. Nesting routing, birbirine bağımlı çok sayıda sayfanın yönetimini kolaylaştırır. Yani, bir sayfada yer alan bir bileşenin, başka bir bileşene yönlendirilerek başka bir sayfaya veya bileşene erişim sağlanabilir.
Nesting Routing kullanırken, BrowserRouter, Route, Switch ve Redirect bileşenlerini kullanacağız. BrowserRouter, React Router'ın en üst seviyesinde kullanılan bir bileşendir. Route bileşeni, URL yoluna karşılık gelen componenti eşleştirir. Switch bileşeni, tek bir Route'ın eşlenmesine izin verir. Redirect bileşeni, bir URL'den başka bir URL'ye yönlendirme yapar.
Ayrıca, Link bileşeni kullanarak sayfalar arasında gezinmek mümkündür. Path parametreleri, dinamik sayfa yönlendirme yapmak için kullanılır. Bu, Route bileşeni oluşturulurken yer alan path'in dinamik bir değer alabilmesini sağlar.
Nesting Routing yapmak isteyen biri öncelikle, bir ana bileşen oluşturmalıdır. Ardından, bu ana bileşenin içine alt seviyedeki bileşenler yerleştirilebilir. Bu alt seviyedeki bileşenler, birbirlerine bağımlı bileşenlerdir. Bu nedenle, Nested Routing yaparken hiyerarşiye dikkat edilmelidir.
React Router'ın sunduğu çok sayıda özellik sayesinde, bileşenleri basit bir şekilde birbirine bağlamak mümkündür. Bu sayede, sayfaların yönetimi daha kolay hale gelir ve projenin yönetimi daha anlaşılır bir hale gelir.
BrowserRouter ve Route Kullanımı
React Router, React uygulamalarında kullanılan bir routing kütüphanesidir. Routing, kullanıcının web sitesinde gezinmesini sağlayan bir mekanizmadır. React Router sayesinde, kullanıcıların web sitesinde istediği sayfaya hızlıca erişmesi mümkün hale gelir. React Router'ın ilk seviyede routing yapmak için kullandığı iki ana öğe BrowserRouter ve Route'dir.
BrowserRouter, URL değişikliklerinde React Router'ın çalışmasını sağlar. Bu nedenle, BrowserRouter uygulamada sadece bir kez kullanılır ve genellikle en üst bileşenlerde yer alır. Route, belirli bir URL adresine karşılık gelen bir bileşendir ve her bir Route'a bir path ve bir component belirtilir. Path, URL ile karşılaştırıldığında ne zaman eşleştiğini belirlerken, component, eşleşme durumunda render edilecek bileşeni belirler.
Örneğin, bir uygulama, "/urunler" sayfasında, ürünler listesini göstermek istiyorsa, bir Route bileşeni oluşturulur ve path alanına "/urunler" yazılır. Eşleşme durumunda ise, component alanına ürünler listesini gösteren bir bileşen yazılır. Bu sayede "/urunler" sayfasına gidildiğinde, uygulama eşleşen Route bileşenini bulacak ve belirtilen component'i görüntüleyecektir.
BrowserRouter ve Route kullanarak ilk seviyede routing yapmak oldukça basittir. Sadece birkaç kod satırı ile bileşenler oluşturarak uygulamanızın routing özelliklerini kullanabilirsiniz. React Router'ın sağladığı özellikleri kullanarak, kullanıcıların web sitenizi rahatlıkla gezebilmesini sağlayabilirsiniz.
Link Kullanımı
React Router, bir web uygulamasını kontrol etmek için kullanılan bir kütüphanedir. React Router, yol çubuğundaki URL'ye göre farklı bileşenlerin veya sayfaların görüntülenmesini sağlar. Nesting Routing ile birlikte kullanıldığında, web uygulamasının kullanıcı deneyimi daha iyi hale getirilebilir. İşte Link kullanımı ile sayfalar arasında gezinti yapmanın nasıl yapıldığı:
- Link bileşeni HomePage.jsx dosyasında çağrılır.
- Ardından, burada kullanmak istediğiniz sayfaya yönlendiren yol parametresini vererek Link bileşenini çağırabilirsiniz.
- Örneğin, bir menüye sahip bir web sayfanız varsa, menüdeki her maddeye bir Link bileşeni ekleyebilirsiniz.
- Link bileşenine tıklandığında, belirtilen sayfaya yönlendirilir.
Bu sayede, kullanıcılar yer imlerini kullanmadan tüm sayfalar arasında kolayca gezinebilirler. Kod üzerinde, Link bileşeni herhangi bir normal HTML bağlantısına benzer şekilde kullanılabilir, ancak kullanıcıların sayfalar arasında daha hızlı bir şekilde gezinmesine yardımcı olur.
Path Parametreleri
Path parametreleri, React Router ile dinamik sayfa yönlendirmesi yapmak için kullanılır. Bu yöntemde, URL içinde belirtilen dinamik değerler kullanılarak, sitedeki sayfalar arası geçiş yapılır.
Path parametreleri tek bir component üzerinden birden fazla sayfaya parametre olarak geçirilerek kullanılır. Böylece sayfalar arasında gezinirken kullanıcıların URL üzerinde belirlediği parametre, React Router tarafından kullanılır ve sayfa yönlendirmesi işlemi gerçekleştirilir. Ayrıca, Path parametreleri, kullanıcıların sayfa içerisindeki bilgilere direkt olarak erişebilmesine de imkan sağlar.
Örneğin, bir öğrenci bilgi sistemi uygulamasında, URL "/ogrenciler/123" şeklinde olabileceği gibi, "123" değeri, Path parametresi olarak geçirilir ve React Router tarafından alınarak öğrenci ID'si olarak kullanılır. Bu sayede, öğrenci hakkındaki bilgilere direkt olarak ulaşılabilir ve sayfa içeriği dinamik olarak değiştirilir.
Path parametresi kullanmak için, Route component'i içerisinde path propertysi "?" ile belirtilmelidir. Örneğin:
Bu örnekte, ":ogrenciID" Path parametresi olarak geçirilir ve OgrenciBilgisi component'i içerisinde kullanılır.
Path parametreleri, React Router'ın dinamik sayfa yönlendirme işlemini daha kolay ve etkili hale getiren bir yöntemdir. Ayrıca, kullanıcı deneyimini en üst seviyede tutarak, web sitesi veya uygulamalarında gezinmeyi daha kullanıcı dostu bir hale getirir.
Switch ve Nested Route Kullanımı
Switch ve Nested Route, alt seviyelerde routing yapmak için kullanılan bir tekniktir. Bu teknik, birden fazla sayfayı tek bir ana sayfaya bağlamak için kullanılır. Bu sayede de kullanıcılar, istedikleri sayfalar arasında kolayca geçiş yapabilirler.
Örneğin, bir uygulamanın ana sayfasında menü seçenekleri varsa, bu menülerdeki seçeneklere tıklandığında farklı sayfalara yönlendirme yapılabilir. Bu sayfaların da içerisinde farklı menü seçenekleri olabilir. Bu seçeneklere tıklandığında da yine aynı tekniği kullanarak ilgili sayfaya yönlendirme yapılabilir.
Switch, eşleşen yolun ilk component'ını render eder ve diğerlerini yok sayar. Bu sayede, yanlış adreslere yönlendirme yapmak yerine, hedef sayfaya yönlendirebilirsiniz. Nested Route ise, bir sayfada birkaç bileşenin olması durumunda kullanılır. Bu sayede, birden fazla bileşenin olduğu sayfalarda bileşenler arasında yönlendirme yapabilirsiniz.
Bir örnek vermek gerekirse, bir web uygulaması düşünelim. Ana sayfada menüler olsun ve bu menülerden birine tıklandığında, alt sayfalar açılsın. Bu alt sayfalar da kendi içinde menü seçenekleri barındırsın. Bu menülerden birine tıklandığında da yeni bir sayfaya yönlendirme olsun. Bu yapıda, ana sayfa için Route kullanıldıktan sonra, alt sayfalar için de Nested Route kullanabilirsiniz.
Kısacası, Switch ve Nested Route kullanarak alt seviyelerde bir routing yapabilirsiniz. Bu sayede kullanıcılar, kolayca ilgili sayfalara ulaşabilir ve uygulamanın kullanımı daha da kullanışlı hale gelebilir.
Exact Kullanımı
React Router, bir uygulama içindeki işlemleri düzenlemek ve farklı sayfalara yönlendirmek için kullanılan bir kütüphanedir. Bu kütüphanenin birçok avantajı vardır ve Nesting Routing bunlardan biridir. Ancak, bazen Nesting Routing kullanarak sayfanın gittiği yolu kontrol etmek zor olabilir. İşte bu noktada Exact kullanımı devreye girer.
Exact kullanarak, yolu tam olarak eşleştirebilir ve sadece belirli bir URL için yol eşleşmesi yapabilirsiniz. Bu, uygulamanızdaki birden fazla sayfa olması durumunda oldukça faydalıdır ve sayfa gezinme işlemini daha kolay hale getirir.
Exact kullanımı bir Route özelliği olarak uygulanır ve doğru bir şekilde ayarlanırsa, yalnızca tam olarak eşleşen yollara yönlendirme yapabilirsiniz. İşte bir örnek kod parçası:
| Kod Parçası | Açıklama |
|---|---|
{` | Bu kod parçasında, sadece "/about" yolu için exact özelliği ayarlandı ve yalnızca tam olarak eşleşen yollara yönlendirme yapılacak. |
Bu kod parçası, uygulamanızda /about yolunu izleyen sayfalar açıldığında, sadece tam olarak bu yolda eşleşen sayfalar açılacaktır. Bu da yalnızca hedef sayfanın açılması ve diğer sayfaların açılmaması anlamına gelir.
Exact kullanımı, uygulamanızdaki sayfalar arasındaki yönlendirmeyi tam olarak kontrol etmenize olanak tanır. Bu sayede, kullanıcı istenmeyen sayfalara gitmeden, doğru sayfalara yönlendirilerek, daha iyi bir deneyim yaşar.
Redirect Kullanımı
React Router'da yönlendirme yapmanın birçok farklı yolu vardır. Bunlardan biri de Redirect kullanarak yapılan yönlendirmedir. Redirect, kullanıcının belirli bir URL'deki sayfadan diğer bir sayfaya yönlendirilmesini sağlayan bir componettir.
Örneğin, bir kullanıcı giriş yaptıktan sonra anasayfaya yönlendirilmek isteniyorsa, Redirect kullanarak yönlendirme yapılabilir. Aynı şekilde, bir kullanıcının bir sayfaya erişim yetkisinin olmaması durumunda başka bir sayfaya yönlendirilmesi de mümkündür.
Redirect kullanarak başka bir sayfaya yönlendirme yapmak için öncelikle React Router'da bu bileşeni import etmek gerekir. Daha sonra, yönlendirme yapmak istediğimiz URL'i belirleyip Redirect bileşenine iletmemiz gerekiyor.
| Durum | URL |
|---|---|
| Giriş yapmamış kullanıcıyı anasayfaya yönlendirme | / |
| Yetkisi olmayan kullanıcıyı hata sayfasına yönlendirme | /error |
Yukarıdaki tabloda, Redirect kullanarak yapmak istediğimiz durumlar ile ilgili URL örnekleri bulunmaktadır. Benzer şekilde başka durumlar için de ilgili URL'ler belirlenebilir.
Redirect kullanırken dikkat edilmesi gereken bir diğer nokta, yönlendirmenin nereye yapılacağıdır. Bu, location propundan belirlenir ve obje kullanılarak belirtilir. Redirect bileşeninde to objesi ile yönlendirme yapılacak URL belirtilir.
{`import React from 'react'; import { Redirect } from 'react-router-dom'; function PrivateRoute({ user, component: Component, ...rest }) { return ( user ? ( Yukarıdaki örnekte, kullanıcının giriş yapıp yapmadığı kontrol edilir. Eğer kullanıcı giriş yapmamışsa, Redirect kullanarak '/login' sayfasına yönlendirilir.
Redirect kullanarak yönlendirme yapma işlemi, React Router'da oldukça kullanışlı bir yöntemdir. Bu bileşen sayesinde, kullanıcıları belirli sayfalara yönlendirmek ve harici URL'lere bağlantı vermek daha da kolaylaşır.
React Router ile Nesting Routing Avantajları
React Router ile nesting routing kullanmak web uygulamanızın performansını arttırmanıza, daha temiz bir kod oluşturmanıza ve daha iyi bir kullanıcı deneyimi sunmanıza olanak sağlar.
Nesting routing ile web uygulamanızı birden fazla seviyeye ayırarak yönetebilirsiniz. Bu sayede kullanıcının ihtiyacı olan sayfayı hızlı, doğru ve güvenilir bir şekilde bulmasını sağlarsınız. Bu da uygulamanızın kullanıcı dostu olmasını sağlar.
React Router, web uygulamanızda yönlendirme yaparken sayfalardaki yeniden yüklemeleri minimumda tutar ve uygulamanın daha hızlı çalışmasına yardımcı olur. Kısa bir süre içinde yüklenen sayfalar daha kullanıcı dostudur ve kullanıcıların sayfalar arasında daha hızlı geçiş yapmasını sağlar.
Nesting routing ile, web uygulamanızda alt sayfaları hızlı ve kolay bir şekilde oluşturabilirsiniz. Sayfa içerisindeki bileşenler, özellikle de görsel bileşenler için testing routing çok önemlidir. Bu sayede her bileşen için ayrı bir sayfa oluşturmak yerine bileşenleri seviyelere ayırarak daha doğru, hızlı ve esnek bir yönetim oluşturabilirsiniz. Ayrıca kodunuzu daha okunaklı ve anlaşılır hale de getirirsiniz.
Sonuç olarak, React Router ile nesting routing kullanmak, web uygulamanızın daha hızlı, doğru ve esnek bir yönetimini sağlar. Bu sayede kullanıcılarınızın uygulamanızı daha iyi bir deneyimle kullanmasını sağlayabilirsiniz.