React Router kütüphanesi, navigasyon işlemlerini kolaylaştıran ve sayfa yenileme olmadan sayfalar arasında gezinme imkanı sağlayan bir JavaScript kütüphanesidir Bu kütüphane, Redirect ve Switch componentleri ile birlikte kullanıldığında oldukça popülerdir Redirect Component, bir route'un başka bir route'a yönlendirilmesi için kullanılırken, Switch Component birden fazla route arasında geçiş yapmak için kullanılan bir componenttir Switch içinde Route tanımlamak oldukça basit ve eşleşen path varsa ilgili componenti render eder Exact parametresi ile ise URL'nin tam olarak eşleşmesi durumunda route gösterilir React Router ile Redirect ve Switch Componentlerinin kullanımı, doğru yönlendirme işlemi sağlamak için oldukça önemlidir

React Router, web uygulamalarında navigasyon işlemlerini kolaylaştırmak için kullanılan bir JavaScript kütüphanesidir. Bu kütüphane, kullanıcının farklı arayüzler arasında geçiş yapmasını sağlar ve React uygulamalarına ekstra bir katman ekleyerek sayfa yenileme olmadan sayfalar arasında gezinme imkanı sağlar.

React Router kütüphanesi, Redirect ve Switch componentlerinin kullanımıyla birlikte de oldukça popülerdir. Redirect Component, bir route'u başka bir route'a yönlendirmek için kullanılan bir componenttir. Bu component, kullanıcıyı belirli bir route'a yönlendirdiği için, bazı durumlarda oldukça yararlı olabilir.

Switch Component ise birden fazla route arasında geçiş yapmak için kullanılan bir componenttir. Eğer birden fazla route tanımlanmışsa, Switch Component sadece ilk eşleşen route'a yönlendirir. Bu sayede, herhangi bir karmaşık durumda yönlendirme işlemlerinde sorun yaşanmaz.

Bu componentlerin kullanımı oldukça basit ve gösterişsizdir. İsterseniz sadece Redirect veya sadece Switch Component kullanabilirsiniz. Ancak, her iki componenti de aynı anda kullanmak, daha güvenli ve doğru bir yönlendirme işlemi sağlar. Bu sebeple, React Router ile Redirect ve Switch Componentlerinin kullanımı oldukça önemlidir.

Redirect Component Kullanımı

React Router kütüphanesi, bir route'un başka bir route'a yönlendirilmesi için Redirect Component'i sağlar. Redirect Component, kırmızırekli dil kullanılarak tanımlanır ve yalnızca koddaki belirtilen durumlarda yönlendirme gerçekleşir.

Örneğin, uygulamanızın bir bölümüne yalnızca giriş yapan kullanıcıların erişebilmesini istiyorsanız, React Router'ın Redirect Component'ini kullanarak bu yönlendirmeyi gerçekleştirebilirsiniz. Bu durumda, kodunuzda şöyle bir yapı oluşturabilirsiniz:

Yukarıdaki örnekte, Route Component'i '/dashboard' path'ine sahip durumlar için tanımlanmıştır ancak bu path'i ziyaret edildiğinde istenen koşullar sağlanmadığı için Redirect Component'i devreye girer ve kullanıcı '/login' sayfasına yönlendirilir. Bu sayede yönlendirme işlemi gerçekleştirilir ve kullanıcının istenmeyen sayfalara erişimi engellenir.

Switch Component Kullanımı

Switch Component, birden fazla Route arasında geçiş yapmak için kullanılan bir component'tir. Switch, Route'ların içerisinde sırayla eşleştirmeler yaparak, ilk olumlu sonuç gördüğünde işlemi sonlandırır ve o Route'a yönlendirir. Bu sayede, aynı zamanda birden fazla Route'a yönlendirme yapma imkanı da sağlar.

Switch Component, React Router kütüphanesi içerisinde yer alır ve kullanımı oldukça kolaydır. Switch Component'i kullanarak, belirlemiş olduğunuz bir yol haritasına göre kullanıcının sizi takip etmesini ve isteklerine yönelik sayfalara yönlendirmesini sağlayabilirsiniz. Bu component, bir ya da daha fazla Route Component'i ile kullanılabileceği gibi,yanıt olarakda birden fazla Route'u tek bir alana yönlendirmenize de imkan sağlar.

Özetlemek gerekirse Switch Component, belirli bir yol haritası oluşturarak birden fazla Route arasında geçiş yapmanıza ve kullanıcılara istedikleri sayfaya yönlendirmenize yardımcı olur.

Switch içinde Route tanımlama

Switch Component'i, birçok route arasında geçiş yapmak için kullanılır. İçinde bulunan Route componentleri sayesinde, hangi route'a geçileceğini belirleme imkanı sağlar. Switch içinde Route tanımlamak, doğru kullanıldığında oldukça faydalı olabilir.

Switch Component'i içinde tanımlanan Route'lar, en üstten aşağı doğru kontrol edilir. Ilk olarak bir Route tanımlandığında, Route'un path özelliği, mevcut path ile eşleştirilir. Eşleşen path varsa, Route'un component'i render edilir. Ancak eşleşen path bulunamazsa bir sonraki Route'a geçilir.

Switch içinde Route tanımlamak oldukça basittir. Basit bir örnek olarak, "/home" path'i ile eşleşen bir componenti render etmek için aşağıdaki kod kullanılabilir.

```html ```

Yukarıdaki örnekte, Switch Component'i içinde Route tanımlanarak "/home" path'inin eşleşmesi sağlanmıştır. Eğer mevcut path "/home" ise, Home componenti render edilir. Diğer tüm path'ler için Switch, bir sonraki Route'a geçiş yapar.

Ayrıca, birden fazla Route tanımlamak mümkündür. Ordinalarını değiştirdiğinizde değişiklikler gözlemlenecektir.

Exact Parametresi Kullanımı

Exact parametresi, Route componentiyle navigasyon yapıldığında URL'nin tam olarak eşleşmesi durumunda route'un gösterilmesini sağlar. Böylece yanlış bir yönlendirme yapılmasının önüne geçilir.

Örneğin, bir siteye giriş yaptığınızda karşınıza çıkan anasayfa component'inin URL'si "/" ise aynı zamanda üyelik sayfasının URL'si de "/register" olabilir. Ancak eğer kullanıcının "/register" yerine "/register.html" yazdığında anasayfa component'inin yerine üyelik sayfası gösterilirse yanlış bir yönlendirme yapılmış olur.

Bu noktada exact parametresi devreye girer ve aynı URL'nin tam olarak eşleşmesi durumunda route'un gösterilmesini sağlar. Exact parametresinin kullanımı oldukça basittir, örneğin:

Yukarıdaki örnekte, exact parametresi "true" olarak belirlendiği için "/register" URL'si tam olarak eşleşmediğinde anasayfa component'i yerine üyelik sayfası gösterilmeyecektir. Bunun yanı sıra, "/register" URL'si tam olarak eşleştiğinde de üyelik sayfası gösterilecektir.

Exact parametresi, navigasyon sırasında yanlış yönlendirmelerin önüne geçerek kullanıcılara daha doğru ve güvenli bir deneyim sunar.

Render Props Kullanımı

Render Props, React Router ile Switch Component’i içinde kullanılan bir tekniktir. Bu teknik, React Router ile render edilen route component’lerinin props’larını paylaşmasını sağlar. Render Props kullanımı, Switch Component’ine route path’leri tanımlamak yerine, component render edilirken path ve prop’larının belirlendiği fonksiyonu döndürür.

Bunun örneği için aşağıdaki kodları inceleyebilirsiniz:

Route Etiketi	Görsel Nesne Etiketi	Component
{` } />`}	{` } />`}	{` } />`}

Bu kodlar, Home Page, Image veya Component gibi herhangi bir React Component’ini render etmek için kullanılabilir. Render Props’un farkı, belirli bir prop’un eşsiz bir şekilde ayarlanabilmesidir.

Örneğin, aşağıdaki kodda, Login component’inin render edilmesi sırasında React Router tarafından sağlanan props’nun rotanın yanı sıra Login component’ine tedarik edilmesi sağlanır.

Bu örnekte, rotanın kullanıcılar için sağladığı bilgileri ve Login component’inin onLogin çağrısı gibi diğer özelliklerini sağlamak için kullanılarak render edilir. Bu özellik, uygulamanızda dinamik olarak oluşturulmuş sayfalar yaratmanızı sağlar.

Path Parametresi Kullanımı

React Router kullanarak birçok farklı route'u tanımlayabilirsiniz ve bu route'lar arasındaki geçişleri kolaylaştırabilirsiniz. Path parametresi, URL'deki dinamik değerleri yakalamak ve kullanmak için kullanılır. Örneğin, bir kullanıcının profili için oluşturduğunuz bir route'un path değeri "/users/:id" şeklinde belirlenebilir. Bu, her farklı kullanıcı için dinamik bir URL sağlar ve kullanıcının profili için unique bir path oluşturur.

Path parametresini kullanmak için, Route componenti içinde belirtilen path değeri özel bir syntax ile belirtilir. Yani, path içindeki köşeli parantezler ve iki nokta kullanılarak dinamik bir parametre tanımlanabilir. Yukarıdaki örnekteki ":id" ifadesi, URL'de herhangi bir değerle eşleşebilir ve kullanıcı ID'sini yakalar.

Bununla birlikte, Path parametresinin ne anlama geldiğini daha iyi anlamak için aşağıdaki örneğe bakabiliriz.

Yukarıdaki örnek, "/users/:id" path'ini kullanarak iki farklı kullanıcının profili için unique bir URL oluşturur. React Router, URL'deki değişken değeri otomatik olarak yakalar ve match için bir parametre olarak ayarlar. Bu parametre, daha sonra başka beyazları doğrudan kullanılabilir.

Switch içinde Redirect tanımlama

Switch Component'i, birden fazla route arasında geçiş yapmanıza olanak sağlayan bir componenttir. Ancak bazı durumlarda, bir route'dan başka bir route'a yönlendirmek isteyebilirsiniz. İşte bu noktada Redirect Component devreye girer.

Redirect Component, belirli bir route'a direkt olarak yönlendirme yapmanızı sağlar. Switch Component içinde kullanarak, uygulamanızın yönlendirmelerini daha etkili bir şekilde yapabilirsiniz.

Örnek olarak, uygulamanızda "/anasayfa" route'u var ve kullanıcı "/anasayfa" route'une doğrudan erişmek istiyor. Fakat uygulamanızda, kullanıcının "/giris" sayfasına yönlendirilmesi gereken bir durum var. Bu durumda Redirect Component'i kullanarak, "/anasayfa" route'undan doğrudan "/giris" sayfasına yönlendirebilirsiniz.

Aşağıdaki örnek kodda, "/anasayfa" route'u "/giris" sayfasına yönlendirilmektedir:

```import { Redirect, Route, Switch } from "react-router";import Giris from "./pages/Giris";import Anasayfa from "./pages/Anasayfa";

function App() { return ( );}```

Yukarıdaki kodda, "/anasayfa" route'u "/giris" sayfasına yönlendiriliyor. "exact" anahtar kelimesi sayesinde yalnızca "/" route'unu "/giris" sayfasına yönlendirdik. Aynı zamanda "from" parametresi ile "/anasayfa" route'undan "/giris" sayfasına yönlendirmeyi gerçekleştirdik.

Bu örnek ile birleştirildiğinde, Switch ve Redirect Componentleri birbirleriyle uyumlu bir şekilde kullanılarak uygulamada yönlendirme işlemleri gerçekleştirilebilir.

Navigation İşlemleri

React Router, bir web uygulaması içerisindeki navigasyon işlemlerini yönetme işlevini yerine getirir. Bu işlem için router, route ve link gibi kütüphaneler kullanılır. React Router ile bir sayfadan diğer sayfaya geçiş yapmak oldukça kolaydır. Bu bölümde React Router ile navigation işlemlerinin nasıl yapılacağı ve örnek kullanım senaryoları ele alınacaktır.

Navigation işlemlerinde en yaygın kullanılan component Link'tir. Bu component, Router ile oluşturulan bir route'a erişimi sağlar. Link, HTML anchor linklerine benzer şekilde kullanılır ve gidilecek sayfanın URL'i, bir text ve CSS class ismi belirtilir. Bir örnek kullanımı aşağıdaki gibidir:

{`import { Link } from 'react-router-dom';`}{`Home`}

Bu kodda, "Home" linkine tıklandığında sayfa "/ " URL'ine yönlendirilir.

Ayrıca, programatik navigasyon yapmak için de kullanılabilen bir dizi fonksiyon bulunmaktadır. Bunlar, tarihçe, navigasyon işlevleri gibi işlemler yapar. Bunlar, Router ile birlikte gelen "history" nesnesi üzerinde kullanılır. Örneğin, tarihçesinde önceki sayfaya geçmek için:

{`import { useHistory } from 'react-router-dom';  function MyComponent() {  const history = useHistory();    function handleClick() {    history.goBack();  }    return (          Go back      );}`}

Bu kodda, önceki sayfaya gitmek için useHistory kütüphanesi kullanılmıştır. Bu şekilde, navigasyon işlemlerini yönetmek oldukça kolay bir hal almıştır.

{`http://localhost:3000/posts?page=2&limit=5`}