React Router, React uygulamalarında sayfa yönlendirmesi yapmak için kullanılan bir kütüphanedir Bu kütüphane, URL değişiklikleriyle uygulamadaki farklı bileşenlere yönlendirme yapar React uygulamasında ana sayfa ve alt sayfa oluşturmak için Route componentleri kullanılır Ana sayfa, basitçe URL'in root olduğu sayfadır Alt sayfalar ise farklı URL'lere sahip sayfalardır Her bir Route, URL'nin belirli bir parçasına sahip olduğunda eşleşen bir componenti temsil eder Link ve NavLink özellikleri kullanılarak kullanıcı dostu URL'ler oluşturulur Exact özelliği, NavLink componentinin tam olarak eşleştiği URL’ler için kullanılır Path özelliği, hangi componentin hangi pathe dahil edileceğini belirler

React uygulamalarında sayfa yönlendirmesi, Genellikle SPA (Single-page Application) olarak adlandırılan web uygulamaları için çok önemlidir. Sayfa yenilemesi olmadan bir sayfadan diğerine geçişler yapabilmek için bir yönlendirme sistemi gerekir. İşte burada React Router devreye girer.

React Router, React uygulamalarında sayfa yönlendirmesi yapmak için kullanılan bir kütüphanedir. Bu kütüphane, URL değişiklikleriyle uygulamadaki farklı bileşenlere yönlendirme yapar. Bu da SPA uygulamalarının kullanıcı deneyimini daha da geliştirir.

React Router'in sağladığı en büyük avantajlardan biri, tek sayfada birden fazla bileşen arasında gezinmek için kullanılabilecek bir yönlendirme sistemi olmasıdır. Yönlendirme sistemini kullanarak uygulama içinde ayrı sayfaları oluşturmak mümkündür. Böylece, kullanıcının uygulama içindeki farklı bölümlere geçiş yapması kolaylaşır.

Anasayfa ve Alt Sayfa Oluşturma

React uygulamaları, kullanıcıların farklı sayfalara yönlendirilmesini gerektiren işlevler içerir. React Router, sayfa yönlendirmeleri yapmak için kullanılan popüler bir kütüphanedir. Ana sayfa ve alt sayfaların oluşturulması ve yönlendirme işleminin yapılması da React Router aracılığıyla gerçekleştirilebilir.

React uygulamasında ana sayfa ve alt sayfa oluşturmak için Route componentleri kullanılır. Ana sayfa, basitçe URL'in root olduğu sayfadır. Alt sayfalar ise farklı URL'lere sahip sayfalardır. Her bir Route, URL'nin belirli bir parçasına sahip olduğunda eşleşen bir componenti temsil eder. Bu özellik sayesinde ilgili componentin tam olarak hangi URL için kullanılacağı belirlenmiş olur.

Route Özellikleri	Açıklama
path	Componentin hangi URL için kullanılacağını belirler.
component	Eşleşen URL ile gösterilecek olan componenti belirler.

Örneğin, "anasayfa" adında bir component oluşturulmak istendiğinde path özelliği "/" olarak tanımlanır, çünkü bu component sadece root URL'sinde görüntülenecektir. Alt sayfa olarak "ürünler" adında bir component oluşturulmak istendiğinde ise path özelliğine '/products' tanımlanabilir, böylece bu component yalnızca "/products" URL'sinde görüntülenir.

Ana sayfa ve alt sayfa sayfaları arasında yönlendirme işlemi, Route componenti içindeki "Link" özelliği ile gerçekleştirilir. Link özelliği, kullanıcının yeni sayfaya gitmesini sağlayan bir yönlendirme bağlantısı içerir.

• Link - Basit bir URL değiştiricisi. Ekranda bir bağlantı olarak görüntülenir ve tıklanabilir. Genellikle Navbar, menü veya düğmelerde kullanılır.
• NavLink - Link'ten daha fazla özellik ile birlikte gelir. Etkilendiğinde etkileşimli bir işaretçi olarak hareket ederek kullanıcıya seçili olduğunu gösterir.

React Router, ana sayfa ve alt sayfaların oluşturulması ve yönlendirilmesinin yanı sıra, yukarıda bahsedilen Link ve NavLink özelliklerini kullanarak kullanıcı dostu URL'ler oluşturmayı da sağlar. Bu özellikler, web sitelerinde gezinmeyi daha kolay hale getirir ve kullanıcılara özellikle mobil cihazlarda daha iyi bir deneyim sunar.

Link ve NavLink Kullanımı

React Router, React uygulamalarında sayfa yönlendirmesi yapabilmek için kullanılan bir kütüphanedir. Sayfa yönlendirmesi Link ve NavLink kullanılarak yapılır. Link, statik bağlantılar için kullanılan bir componenttir. NavLink ise dinamik bağlantılar ve stil uygulamaları için kullanılır.

Link ve NavLink arasındaki fark, NavLink’in aktif sayfa ile ilgili ekstra özelliğe sahip olmasıdır. Bu özellik sayesinde aktif sayfadaki bağlantı bir class eklenerek gösterilebilir. Exact özelliği ise NavLink componentinin tam olarak eşleştiği URL’ler için kullanılır. Eğer exact özellği kullanılmazsa NavLink componenti her URL’ye uyan için çalıştırılır.

Exact Kullanımı

Exact özelliği, NavLink içinde kullanıldığında, sadece tam eşleşen URL'lerin aktive edilmesine yardımcı olur. Bu özellik, yalnızca uygulamanızda belirli bir yere gitmek istediğinizde kullanılması gereken bir özelliktir. Örneğin, ana sayfada bir menü olabilir ve ana sayfa menüsüne tıklandığında, ana sayfaya yönlendirilmesi gerekir. Ancak, alt sayfalar için NavLink kullanırken exact özelliğini kullanmak önemlidir. Böylece kullanıcılar yanlışlıkla yanlış sayfalara yönlendirilmezler. Exact özelliği ayarlamak, aşağıdaki gibi basit bir kullanımı vardır:

``` Anasayfa```

Bu özellik, NavLink'in sadece tam eşleşen bir URL'ye tıklanması durumunda aktive olmasını sağlar. Diğer bir deyişle, tam olarak "/anasayfa" URL'sine tıklandığında çalışacaktır. Aksi takdirde, NavLink'in aktif olmadığı bir URL'ye tıklamak, kullanıcıları yanlış yönlendirebilir.

Exact özelliği, doğru sayfaya yönlendirmek için önemlidir ve uygulamanızdaki sayfa yönlendirmelerinde kullanılması önemlidir. Bu sayede kullanıcılar, işlevselliğin karışıklığını minimizasyonu ve doğru sayfaya yönlendirilmeleri garantilenir.

Path ve Component İlişkisi

React Router, react uygulamalarında sayfa yönlendirmesi yapmak için kullanılmakta olan bir kütüphanedir. Bu kütüphanenin kullanımı oldukça kolaydır. Path özelliği bu yönlendirmeleri yaparken en çok kullanılan özelliklerden biridir. Path özelliği ile hangi componentin hangi pathe dahil edileceğini belirleyebiliriz.

Örneğin, '/anasayfa' pathine sahip bir sayfa oluşturduğumuzda, bu sayfaya bağlı olarak bir component de belirlememiz gerekmektedir. Bu component, AnaSayfa componenti olacaktır. Böylece uygulama, '/anasayfa' pathindeyken AnaSayfa componentini otomatik olarak çağıracaktır.

Benzer şekilde '/about' pathine sahip bir sayfa oluşturduğumuzda, bu sayfaya bağlı olarak bir component de belirleyebiliriz. Bu component, Hakkında componenti olacaktır. Böylece uygulama, '/about' pathindeyken Hakkında componentini otomatik olarak çağıracaktır.

Path ve component ilişkisi, react router kullanımında oldukça önemlidir. Bu ilişki doğru kurulmadığı takdirde, sayfalar arası geçişlerde sorunlar yaşanabilir. Bu nedenle uygulama içerisindeki sayfaların pathleri ve bu pathlere dahil edilecek componentlerin doğru şekilde belirlenmesi gerekmektedir.

Switch Kullanımı

React Router, sayfa yönlendirme işlemlerinde kullanılan bir kütüphanedir. Bu kütüphane, birden fazla pathe sahip olan sayfaların doğru bir şekilde yönlendirilmesini sağlamaktadır. Bunun için "Switch" özelliği kullanılır.

• Switch özelliği, aynı anda birden fazla componenti render etmez. Sadece eşleşen ilk pathe sahip olan componenti görüntüler.
• Birden fazla Route componentinin yer aldığı bir Switch özelliği, yalnızca en üstteki eşleşen componenti render eder.
• Bir Rote componenti bir Switch içinde yer alıyorsa, ana Switch özelliği içinde değilse eşleşmeleri göz ardı edilir.

Örneğin, ana sayfanın URL'si "/" ve hakkında sayfasının URL'si "/about" olsun. Eğer Switch özelliği içinde Route componenti olarak önce "/about" pathe sahip sayfa, sonra da "/" pathe sahip ana sayfa belirtilirse, /about URL'sindeki sayfayı ziyaret etmek isteyen kullanıcı, ana sayfanın yerine doğrudan "/about" sayfasına yönlendirilir.

Ancak Route componentlerinin sıralaması çok önemlidir. Eğer yukarıdaki örnekte ana sayfanın URL'si olan Route componenti önce "about" sayfasına yönlendiren Route componenti sonradan yazılmışsa, ana sayfaya girildiğinde istenen "/about" sayfasına yönlendirme yapılmayacaktır.

Dinamik URL Yönlendirme

React Router, dinamik URL yönlendirme özelliği sunar. Bu, parametreler kullanarak URL'lerin yönlendirilmesini sağlar. Dinamik yönlendirme, bir URL değişkeni aracılığıyla anlamlı ve özelleştirilmiş bir URL yapısını mümkün kılar. Bu özellik, kullanıcının yalnızca bir URL'yi değiştirerek diğer sayfalara kolayca erişebilmesini sağlar.

Path parametreleri, dinamik bir URL oluşturmanın en yaygın yoludur. Bu parametreler, URL içindeki belirli bir bölümün kısmen değiştirilebilmesini sağlar. Örneğin, bir kullanıcının kişisel sayfasına erişmek için URL'deki kullanıcı adı belirtilmelidir. Bu, dinamik yönlendirme özelliği sayesinde mümkün hale gelir.

Query parametreleri, URL'lerin belirli bir sayfaya verilerle yönlendirilmesine izin verir. Bu yolla, sayfalar arasında veri akışı sağlanır. Query parametreleri değişebilir ve genellikle anahtar-değer çifti şeklinde tanımlanırlar. Değişken veri türlerini de barındırabilirler.

React Router, dinamik yönlendirmenin herhangi bir yoluna izin verir. Parametreler tedavi edilir ve bir URL parametresi ile birleştirilerek uygun sayfaları bulmak için mevcut yolu tarar. Bu sayede, dinamik bir web sitesi veya uygulama tasarlama olanağı sunar.

Path Parametreleri

React Router kullanılarak, URL içerisinde değişebilen parametreler belirlenebilir. Bu özellik sayesinde, farklı içeriklere kolayca ulaşılabileceği gibi, dinamik içerikler de oluşturulabilir. Path parametreleri kullanırken, URL içerisinde ':' karakteri kullanılır ve bu karakterden sonra gelecek olan kısım, parametreler için belirlenecek olan isim olacaktır. Örneğin, '/users/:userId' şeklinde bir path belirlendiğinde, URL içerisindeki 'userId' parametresine erişebiliriz.

React Router'da path parametreleri kullanarak, route'lara parametreler eklemek oldukça kolaydır. Örneğin, '/users/:userId' path'ine sahip bir route, 'userId' parametresinin alınacağı bir component'e yönlendirilebilir. Bu sayede, '/users/123' gibi bir URL'ye gidildiğinde, 'userId' parametresinin 123 olduğu anlaşılacak ve veri tabanından 123 id'li kullanıcının bilgileri getirilebilecektir.

Path parametreleri ayrıca, birden fazla parametre kullanılarak tek bir path içerisinde de kullanılabilir. Örneğin, '/products/:productId/:category/' şeklinde bir path, productId ve category parametrelerini alarak, ürün detay sayfasına yönlendirilebilir.

Tablolar ve listeler de, path parametreleri kullanırken oldukça faydalıdır. Örneğin, bir kullanıcının tüm blog yazılarını gösteren bir sayfa oluşturmak istediğimizi düşünelim. Bu durumda, '/users/:userId/posts' şeklinde bir path belirleyebiliriz. Bu path'e sahip bir route, 'userId' parametresini alarak, kullanıcının tüm blog yazıları listesini getirecektir.

Sonuç olarak, path parametreleri kullanarak, URL içerisinde değişen değerleri yönetmek ve dinamik içerik oluşturmak oldukça kolaydır. Path parametreleri ile kullanılabilecek işlem ve özelliklerin sınırları, yaratıcılığınıza bağlıdır.

Query Parametreleri

Bir diğer yöntem ise query parametreleri kullanarak yapılır. Query parametreleri, URL içinde karakter dizisi olarak eklenen, benzersiz bir tanımlayıcıdır. "https://ornek.com/urun?id=1234" gibi bir URL'deki "id=1234" kısmı query parametresidir. React Router'da bu parametreler, location prop'unda yer alır ve aşağıdaki örnekle kullanılabilir:

      import React from 'react';    import { useLocation } from 'react-router-dom';    function ProductPage() {      const location = useLocation();      const productId = new URLSearchParams(location.search).get("id");      return (        
                    
Ürün ID: {productId}
        
      );    }    export default ProductPage;  

Özellik	Açıklama
location	Current URL'in bilgisini içeren bir objedir.
search	Query parametrelerinin yer aldığı karakter dizisidir.
URLSearchParams	URL içerisindeki parametreleri parse etmek için kullanılan bir DOM API'dir.
get()	Belirtilen query parametresinin değerini döndürür.

Yukarıdaki örnekte, useLocation() hook'u kullanarak location objesi alınır ve URLSearchParams() ile query string parse edilir. Daha sonra get() fonksiyonu ile istenilen parametrenin değeri alınır ve sayfada kullanılır.