React Router, React uygulamalarında dinamik bir yönlendirme sistemi oluşturmak için kullanılan bir kütüphanedir Bu kütüphane, kullanıcıların sayfalar arasında gezinmelerini sağlar ve uygulamanın URL yapısının oluşturulmasına yardımcı olur React Router,
React Router, React uygulamalarında dinamik routing oluşturmak için kullanılan bir kütüphanedir. React Router, sayfalar arasında geçiş yapmak için kullanılan yönlendirme sistemidir. Bu yönlendirme sistemi, kullanıcıların sayfalar arasında gezinmesini sağlar ve uygulamanın URL yapısının oluşturulmasına yardımcı olur.
React Router, uygulamanın bir veya birden fazla sayfasının URL yapısını yönetmenize olanak tanır. Bu sayede, kullanıcılar uygulamayı kullanırken sayfalar arasında gezinmeleri kolaylaşır. React Router aynı zamanda, uygulamanın performansını artırmak için Lazy Loading gibi optimize edici özellikler sağlar.
React Router Kurulumu ve Kullanımı
React Router, React uygulamalarında dinamik routing oluşturmak için kullanılan bir kütüphanedir. React projelerinde kullanılabilmesi için öncelikle npm paketleri ile yüklenmesi gerekir. React Router kurulumunu tamamladıktan sonra, Router component'ini kullanarak routing işlemine başlanabilir. Router component'lerinden birisi olan
Bir Router component'ini kullanabilmek için, ilgili component'i import etmek ve bir
BrowserRouter ve HashRouter Farkları
# BrowserRouter ve HashRouter Farkları
React Router kullandığımızda, URL path'lerini normal URL'ler gibi göstermek için
BrowserRouter, URL path'lerini normal tarayıcı URL'leri gibi gösterir. Örneğin, www.website.com/about şeklinde bir URL path'i varsa, BrowserRouter bileşeni bu URL'yi normal bir URL olarak okur ve görüntüler. HashRouter ise URL'nin başına "#" işareti ekler. Bunun anlamı, www.website.com/#/about gibi bir URL görüntülenir.
BrowserRouter, sunucu tarafında ayarlandığında kullanılırken, HashRouter basit uygulamalar ya da statik siteler için daha idealdir. Bu nedenle, projenin gereksinimlerine göre hangi React Router component'inin kullanılacağına karar vermek önemlidir.
BrowserRouter ve HashRouter arasındaki farklılıkları daha iyi kavramak için aşağıdaki tabloya bakabilirsiniz:
| BrowserRouter | HashRouter |
|---|---|
| Normal URL'ler gibi path'leri okur ve görüntüler. | URL'nin başına "#" ekler ve path'leri görüntüler. |
| Sunucu tarafında ayarlandığında kullanılabilir. | Basit uygulamalarda ya da statik sitelerde daha idealdir. |
React Router'daki
HashRouter Kullanımı ve Özellikleri
HashRouter, BrowserRouter ile benzer şekilde routing yapısı oluşturmak için kullanılır ancak URL'leri sunucu tarafında işlemlemeden, tüm işlemi client-side'da gerçekleştirir. HashRouter kullanımı, basit uygulamalar veya statik web siteleri için uygundur. HashRouter'ın en büyük avantajı URL üzerindeki değişikliklerin tamamen client-side'da işlenmesidir. Bu sayede sayfaların yeniden yüklenmesine gerek kalmaz ve kullanıcının deneyimi daha hızlı ve akıcı hale gelir.
HashRouter kullanımları, BrowserRouter'a görre daha farklıdır. Öncelikle component import işlemi yapılır ve ardından
HashRouter, dinamik routing işlemlerinde de kullanılabilir. Route parametreleri kullanılarak hash üzerinde belirli bir parametre değeri tanımlanabilir ve bu parametreler component içinde props olarak kullanılabilir. Ayrıca, Redirect kullanarak da başka sayfalara yönlendirme işlemleri yapılabilir.
HashRouter kullanımı, basit bir dimamik routing yapısı isteyenler için ideal bir seçenektir. Ancak, daha karmaşık uygulamalarda BrowserRouter daha avantajlı olabilir. Routing yapısı seçiminde proje ihtiyaçlarının göz önünde bulundurulması önemlidir.
işaretinden sonra URL'leri görüntüler.React Router kütüphanesinde, iki farklı router component'i kullanılabilir: BrowserRouter ve HashRouter. BrowserRouter, URL path'lerini normal tarayıcı URL'leri gibi görüntülerken, HashRouter "#" işaretinden sonra URL'leri görüntüler. Bu nedenle, HashRouter'ın URL'lere "#" eklemesi nedeniyle URL'lerde daha okunaklı ve anlaşılır bir yapı oluşur.
BrowserRouter, sunucu tarafında ayarlandığında kullanılırken, HashRouter basit uygulamalar veya statik sitelerde kullanılır. Özellikle, React uygulaması, sunucu tarafında herhangi bir ayarlama yapılmadan, sadece bir index.html dosyası oluşturarak deploy edilecekse HashRouter tercih edilebilir.
BrowserRouter ve HashRouter Hangi Durumlarda Kullanılır?
React Router'da,
BrowserRouter, normal tarayıcı URL'leri gibi URL path'lerini görüntüler ve sunucu tarafında ayarlandığında kullanılabilir. HashRouter ise URL'lerin belirli bir işaret (#) ile başladığı durumlar için uygundur. Basit ve statik web uygulamalarındaki route'larda kullanılması daha yaygındır.
BrowserRouter ve HashRouter arasındaki bu farklar, uygulama ihtiyaçlarına göre kullanılabilecek en uygun routing çözümünün seçimine yardımcı olur.
Link Komponenti Kullanımı
Link Komponenti Kullanımı
React Router ile farklı route'lara yönlendirme yapmak için Link komponenti kullanılır. Bu komponent, sayfalar arasında gezinmek için kullanılır ve sayfa yenileerek URL'leri değiştirmeden yönlendirme yapar.
Link komponenti, sayfaya click yapıldığında ilgili route'a yönlendirir. Örneğin, anasayfada bulunan bir butona click yapıldığında, "/anasayfa" route'una yönlendirme yapabilirsiniz.
Link komponenti kullanımı oldukça basit ve şu şekildedir:
| Kod Bloğu | Açıklama |
| <Link to="/anasayfa">Anasayfa</Link> | "/anasayfa" route'una yönlendirir. |
Bu komponenti kullanırken, hedef route'un path özelliği kullanılır.
Link komponenti sayesinde, kullanıcı sayfada gezinirken URL değiştirilerek Route'lara yönlendirilebilir. Kullanıcıların sayfa arasında kaybolmadan, URL'ler değişerek gezinmesi sağlanır.
React Router Nested Routing
React uygulamalarında, farklı component'lerin farklı URL'lerde görüntülenmesi gerekebilir. Ancak bazı durumlarda, bir component'in başka bir component içinde görüntülenmesi gerekebilir. İşte bu durumlarda, React Router kullanarak nested routing yapılabilmektedir. Yani bir route içinde başka bir route oluşturarak, birden fazla component'i aynı sayfada gösterebilirsiniz. Bu işlem, birden fazla sayfa oluşturmanıza gerek kalmadan, uygulamanızın daha düzenli görünmesini sağlar.
Öncelikle, başka bir component'i içeren bir component örneği oluşturulabilir. Ardından, bu içerik route içinde kullanılarak, istenilen sayfada görüntülenebilir. Böylece, asıl sayfaya bir alt sayfa ekleyebilirsiniz.
Aşağıdaki örnek,
```
Nested routing yaparken, component'lerin hangi path'lerde görüneceğine karar vermek önemlidir. Bu sayede, uygulama daha tutarlı bir yapıya sahip olur ve kullanıcılar istedikleri bilgiye daha kolay erişebilirler.
Route Parametreleri
Route Parametreleri, React Router ile dinamik sayfalar oluşturmak için kullanılabilen oldukça önemli bir özelliktir. Bu özellik sayesinde kullanıcının girdiği parametrelere göre farklı sayfalar görüntülenebilir. Route içinde parametrler kullanarak, URL içinde yer alan farklı değerleri yakalayabiliriz.
Parametreleri kullanırken, öncelikle Route içinde belirtilen path değeri içerisinde parametre adını belirtmemiz gerekiyor. Bunun için path değerinin sonuna /:parametreAdi şeklinde bir formül kullanılıyor. Bu sayede kullanıcının girdiği herhangi bir değer path içindeki parametreAdi değişkenine atılacaktır.
Örneğin, bir uygulama içerisinde kullanıcının profil bilgilerini görüntüleyebileceği bir sayfa olsun. Bu sayfaya erişmek için bir kullanıcının ID numarasını girerek http://localhost:3000/profile/1 gibi bir URL oluşturması gerekiyor. Bu durumda Route içinde path="/profile/:id" şeklinde bir kodlama yaparak, her bir kullanıcının belirli bir ID numarasına sahip profil sayfasına erişmesini sağlayabiliriz.
Aynı şekilde, bir blog sitesinde belirli bir konuda yazılan farklı makaleleri gösteren bir sayfa olsun. Bu sayfada, kullanıcının seçtiği konu kategorisine göre farklı içerikler gösterilmeli. Bu durumda, Route içinde kategori adını belirleyerek, girilen parametreye göre kategoriye özgü içerikler görüntülenebilir. Örneğin, path="/blog/:kategori" şeklinde bir kodlama yaparak, http://localhost:3000/blog/react gibi bir URL ile React kategorisindeki tüm blog yazılarına erişebilirsiniz.
React Router ile route parametrelerini kullanarak, uygulamanızda dinamik ve özelleştirilmiş sayfalar oluşturmak mümkündür. Bu sayede kullanıcılara özgün ve anlamlı bir deneyim sunabilirsiniz.
Parametrelerin Kullanımı
/: yazılarak parametre adı belirlenir ve bu parametre component içinde props olarak kullanılabilir. Bu sayede, farklı sayfalar için aynı component kullanılarak, route path'indeki parametreler değişerek dinamik sayfalar oluşturulabilir. Örneğin, bir kullanıcının profil sayfasına gitmek istediğinde URL üzerinde kullanıcının adı veya ID'si geçerek, farklı kullanıcıların profillerini görüntüleyebilir. Bu sayede, aynı componenti farklı kullanıcılar için kullanarak, kod tekrarını engelleyebiliriz. Ayrıca, parametreler props olarak component içinde kullanılabildiği için, dinamik veri gösterimleri yapılabilir ve özelleştirilmiş kullanıcı arayüzleri oluşturulabilir. Bu parametrelerin kullanımı sayesinde, React Router ile kullanıcıların dinamik ve özelleştirilmiş bir deneyim yaşayacağı sayfalar oluşturmak mümkündür.
/:Route Parametreleri
React Router, dinamik parametreleri route işlemleri içinde kullanarak, dinamik sayfalar oluşturmanızı sağlar. Bu sayede tek bir sayfa üzerinden farklı içerikleri göstermeniz mümkündür. Route parametreleri, örneğin kullanıcılar, ürünler gibi değişken verileri yönlendirmek için kullanılır.
Parametreleri kullanmak için, route path'i içinde /: yazılarak parametre adı belirlenir. Parametre adı, component içinde props olarak kullanılabilecek şekilde aktarılabilir. İlgili parametrenin adı, ':' karakteri sonrasında yazılır. Örnek olarak, /users/:id şeklinde bir path, belirli bir kullanıcının profiline gitmek için kullanılabilir. Bu sayede, belirli bir kullanıcının profil sayfasına yönlendirildiğinde, ilgili kullanıcının verileri alınarak gösterilebilir.
Aşağıdaki örnekte, '/users/:id' path'i kullanılarak, belirli bir kullanıcının profiline gitmek mümkün hale gelir:
```
Örnekte, UserDetails componenti içinde id parametresi kullanılarak, ilgili kullanıcının verileri gösterilebilir. Route parametreleri ile bu şekilde dinamik bir içerik yapısı oluşturmak, React Router'ın en önemli özelliklerinden biridir.
yazılarak parametre adı belirlenir ve bu parametre component içinde props olarak kullanılabilir.Dinamik parametreler, React Router'ın sağladığı en büyük faydalardan biridir. Yeni sayfalar oluşturmak için ihtiyaç duyulan her parçanın aynı bileşenlerinin yeniden kullanımını sağlarlar. Parametreler, Route componenti içinde belirtilir ve Şöyle yazılır:
| Yöntem | Açıklama |
|---|---|
| :id | Bir dize değeri içindeki bir sayısal kimliği eşleştirir. |
| :name | Bir dize değeri içinde adı eşleştirir. |
| :slug | Bir dize değeri içindeki bir kelimeyi veya kelime öbeğini eşleştirir. |
Parametre adı seçerken, sembolün başına bir nokta ve iki nokta konulur. Daha sonra, parametre adını seçebilirsiniz. Parametre adı, path değişkenindeki iki noktalı işaretten sonra yazılır. Örnek olarak, <Route path="/users/:id" component={Users}/> yolunu kullanarak parametre oluşturulabilir. Bu yolla, "/users/1" gibi bir URL, parametre olarak "1" ID'sini içerir.
React Router Redirect İşlemi
React Router kullanan bir uygulamada, kullanıcının belirli bir route adresine erişimini engellemek için redirect işlemi kullanılabilir. Redirect işlemi, kullanıcının istediği sayfayı görüntülemesi yerine, belirli bir sayfaya yönlendirilmesini sağlar. Bu durumda,
Redirect işlemi, kullanılan uygulamanın ihtiyaçlarına göre ayarlanabilir. Örneğin, bir kullanıcının profil sayfasına erişimi sadece kendi profili için kullanılabilirken diğer kullanıcıların profillerini görmesi engellenebilir. Bu durumda, redirect işlemi kullanılarak kullanıcının kendi profil sayfasına yönlendirilmesi mümkündür.
Redirect işleminin kullanımı oldukça kolaydır ve
Örneğin, app.js dosyasında
```
Örnekteki kod parçası, "/login" adresine erişim sağlayan kullanıcıları otomatik olarak "/signup" adresine yönlendirir. Benzer şekilde, "/signup" adresine erişemeyen kullanıcılar otomatik olarak "/login" sayfasına yönlendirilir.
React Router redirect işlemi, uygulamanın kullanıcı deneyimini geliştirmek için oldukça etkili bir yöntemdir. Bu işlem, kullanıcının istenmeyen sayfalara erişmesini engellerken, uygulamanın kullanımını da kolaylaştırır.
Redirect İşlemi Kullanımı
React Router içerisinde kullanıcının belirli bir route adresine erişimine engel olmak için redirect işlemi oldukça kullanışlıdır. Kullanıcılar, doğru adresin belirlenmesi için yanlış adreslere yönlendirilebilir. Bunun için, Redirect komponenti kullanılarak, belirli bir adresten başka bir adrese yönlendirme sağlanabilir.
Bir örnek vermek gerekirse, kullanıcı bir login sayfasının dışındaki sayfaya yönlendirmeye çalıştığında, genellikle belirli bir otorizasyon talebi karşılanmamış olduğundan yeniden login sayfasına yönlendirilirler. Bunun için React Router içerisinde Redirect komponenti kullanılarak, login sayfasına yönlendirme işlemi yapılabilir.
Redirect komponenti kullanımı oldukça basittir. Sadece yönlendirmek istenen route'yı belirtmek yeterlidir. Örneğin;
| Kod Parçası | Açıklama |
|---|---|
| {` | Anasayfa sayfasının route'ı |
| {` | Login sayfasının route'ı |
| {` | Home sayfasından başka sayfaya yönlendirmek için kullanılır. |
Yukarıdaki örnekte, home sayfasından başka bir sayfaya yönlendirme yapmak istenildiğinde, Redirect komponenti kullanılarak "/home" route'ı "/" route'ına yönlendirilir.
Bu sayede, kullanıcılar yanlış bir adrese erişim sağladığında, istenilen sayfaya yönlendirilmesi sağlanabilir. Redirect işleminin sağladığı avantajlardan biri de, istenilmeyen durumların önüne geçilmesidir.