React Router v6, web uygulamalarındaki navigasyon yönetimini kolaylaştıran bir kütüphanedir Son güncellemesi ile birçok yenilik getirmiştir Özellikle Route, Link ve Redirect bileşenlerinin artık farklı isimler kullanması, parametre değerlerinin sözlüklerde depolanması ve daha okunaklı URL'ler elde edilmesi gibi özellikleri öne çıkmaktadır
Routes bileşeni, tüm Route bileşenlerini bir araya getiren yeni bir bileşendir ve kod organizasyonunu kolaylaştırır useRoutes Hook, route yapısını tanımlamak için kullanılan yeni bir Hook'tur ve daha doğru ve detaylı bir yapı sunar useSearchParams Hook, tarayıcının URL'sindeki arama sorgularını almanızı sağlar
React Router v6'da özel Hooklar daha da güçlendirilmiş ve geliştiricilere daha fazla özelleştirme seçeneği sunulmuştur Örneğin, useLocation Hook, URL adresine ilişkin bilgi sağlar ve useParams Hook, URL'den parametreleri kullanarak sayfaya veri aktarmanızı

React Router v6, web uygulamalarındaki navigasyon yönetimi için en popüler kütüphanelerden biridir. Son güncellemesi ile birlikte birçok yenilik getirdi. Bu makalede, React Router v6 ile getirilen yenilikler detaylı bir şekilde tartışılacak.

Yenilikler arasında Route, Link ve Redirect bileşenlerinin artık farklı isimler kullanması yer alıyor. Ayrıca, parametre değerleri artık sözlüklerde depolanacak ve sonuçta daha okunaklı URL'ler elde edilebilecek.

• Routes bileşeni, tüm Route bileşenlerini bir araya getiren yeni bir bileşen olarak oluşturuldu.
• useRoutes Hook ile route yapısını tanımlamak için kullanılan yeni bir Hook introdu edildi.
• useSearchParams Hook, tarayıcının URL'sindeki arama sorgularını almanızı sağlayabilir.
• Link bileşenlerine responsive özellikleri eklendi.
• React Router v6'da özel Hookların gücü artırıldı ve geliştiricilere daha fazla özelleştirme seçeneği sunuldu. useLocation Hook, react-router-dom kütüphanesinde bulunan ve URL adresine ilişkin bilgi sağlayan bir Hook olarak güncellendi. useParams Hook, URL'den parametreleri kullanarak sayfaya veri aktarmanızı sağlar.

Tüm bu yeni özellikler, React Router'ın daha da kullanışlı hale gelmesini sağlamaktadır. Geliştiriciler, daha okunaklı URL'ler elde edebilir ve daha iyi özelleştirilmiş web uygulamaları tasarlayabilirler.

Komponent İsimleri Değişti

React Router v6'nın getirdiği yenilikler arasında, bileşenlerin isimleri de değişti. Daha önce Route, Link ve Redirect bileşenleri kullanılırken, artık farklı isimlerle karşılaşabilirsiniz. Örneğin, Route yerine Routes kullanılmaya başlandı. Link yerine NavLink kullanılıyor. Bu değişiklikler, component isimlerinin seçeneklerini genişletti ve farklı bileşenlerin kullanılmasına izin verdi. Bu da geliştiricilere daha fazla seçenek sunarak, React Router v6'nın yeniliklerini kullanarak daha özelleştirilmiş bir deneyim sunmalarına yardımcı oldu.

Bunun yanı sıra, yeniliklerin bir diğer önemli parçası, parametre değerlerinin artık sözlüklerde depolanmasıdır. Bu sayede, daha okunaklı URL'ler elde edilebiliyor. Eski sürümlerde, URL'ler içindeki parametreler direkt olarak veriliyordu. Ancak bu durum, okunaklılığı azaltıyordu. Yeni sürümde ise, parametreler sözlüklerde depolanarak, okunaklılığı artırıyor. Bu da dikkat çeken diğer bir yenilik olarak öne çıkıyor.

Parametre İsimleri Artık Sözlüklerde Depolanacak

React Router v6, parametre isimlerinin kullanımını daha da kolaylaştırmak için sözlük yapısını kullanmaya başladı. Artık parametreler bir sözlükte depolanabilecek ve daha okunaklı URL'ler elde edilebilecek. Örneğin, bir kullanıcının bir kitap hakkındaki yorumlarını görmek istiyorsanız, URL "/books/comments?id=123" yerine, "/books/comments/123" şeklinde daha anlaşılır bir URL kullanabilirsiniz.

Bu değişiklik, tıpkı URL'lerin kullanımının gelişimi gibi, geliştiricilerin çabalarını optimize etmek ve daha iyi kullanıcı deneyimleri sağlamak amacıyla yapılmıştır. Daha okunaklı URL'lerin yanı sıra, parametreleri sözlükte depolamak da URL'in bir parçası gibi okunurluluğunu artırır. Bu nedenle bu yeni özellik, özellikle büyük ve karmaşık sitelerde, sitenin SEO'sunu artırmaya ve kullanıcı deneyimini iyileştirmeye yardımcı olabilir.

Routes Yeni bir Component

React Router v6, birçok yenilikle birlikte Routes isimli yeni bir bileşeni tanıttı. Bu bileşen, tüm Route bileşenlerini bir araya getirerek kod organizasyonunu kolaylaştırır ve daha okunaklı bir kod yazma imkanı sunar. Önceki sürümlerde, birden fazla Route bileşeni kullanmak gerektiğinde karmaşık bir yapı oluşuyordu. Ancak Routes bileşeni, birden fazla Route bileşenini tek bir bileşende topladığından, kod yazma sürecini daha verimli hale getirir.

Bir diğer yenilik ise useRoutes Hook'unun React Router v6'ya eklenmesi oldu. Önceden Route bileşenlerini tanımlamak için Route componentleri kullanılıyordu. Ancak Routes bileşeni ve useRoutes Hook'u beraber kullanıldığında React Router v6, daha doğru ve detaylı bir yapı sunar. Bu iki yenilik birlikte, react-router-dom kütüphanesinde yer alan Route ve Switch bileşenlerinin yerini alır.

useRoutes Hook

React Router v6, birçok yenilik ve güncellemeyle gelirken, useRoutes Hook, en çarpıcı değişikliklerden biridir. Bu özellik, route yapısını tanımlamak için kullanılan yeni bir Hook olarak tanıtıldı. useRoutes Hook, react-router-dom paketi içinde bulunur.

Bu Hook, kullanıcının genişletilmiş bir URL yapısını okumasına ve anlamasına olanak tanır. Bu işlev, application üzerindeki farklı sayfaları yönlendirmek için kullanılabilir. useRoutes kullanılan React Router bileşenleri ve parametreleri belirler. Ayrıca, birden fazla bölüm ve sayfa için route yapısını özelleştirmenize olanak sağlar.

Bununla birlikte, useRoutes Hook, daha yalın bir URL yapısı için de kullanılabilir. Yeni Hook, daha fazla özelleştirme şansı vererek, web uygulamalarının daha etkileşimli ve verimli hale getirilmesine olanak sağlar. React Router v6'daki yenilikler arasında, useRoutes Hook'un gücü artırılmaktadır.

useSearchParams Hook

React Router v6 ile birlikte tanıtılan useSearchParams Hook, tarayıcının URL'sindeki arama sorgularını çözümlemeye yönelik kullanılan bir Hook'tur. Bu sayede, arama sorguları ile ilgili işlemlerde yardımcı bir bileşen olarak kullanılabilir.

Bu esnek Hook, arama sorgularındaki herhangi bir parametreye kolaylıkla erişmenizi sağlar. Sorgulardan elde edilen sonuçları işleyebilmeniz ve sayfayı buna göre göstermeniz mümkün hale gelir.

Bu özellik, sayfalarınızın URL yapısını daha işlevsel bir hale getirir. Aynı zamanda, kullanıcılara da daha iyi bir deneyim sunar. Kullanımı oldukça kolaydır ve birkaç basit adımda arama sorgularını kontrol etmenizi sağlar.

Örneğin, bir e-ticaret sitesinde kullanıcılar, ürünleri ararken sıralama ve filtreleme seçenekleri kullanabilir. useSearchParams Hook, bu seçeneklerin sayfa URL'sine işlenmesinde yardımcı olur ve kullanıcılara daha fazla kontrol sağlar.

useSearchParams Hook, React Router v6 ile beraber gelen yeniliklerden biridir ve geliştiricilere birçok olanak sunar. Bu Hook'un kullanımı, URL yapısını daha kullanıcı dostu ve işlevsel bir hale getirmek için oldukça önemlidir.

Link Elementi Duyarlılık Eklendi

React Router v6, Link bileşenlerinde artık responsive özellikler eklenerek daha duyarlı bir yapıya kavuştu. Bu sayede, farklı ekran boyutlarına uyum sağlamak daha kolay hale geldi. Özellikle mobil cihazlarda kullanıcı deneyimini daha üst seviyeye taşımak için etkili bir düzenleme yapıldı.

Link bileşenlerinin, mobil cihazlarda daha doğru bir şekilde işlev görmesi için yeni bir özellik eklendi. Bu sayede mobil cihazlarda kullanıcılar, Link bileşenlerine dokunduklarında daha rahat bir şekilde ilgili sayfaya yönlendirilebiliyorlar.

Bu özellik, sadece mobil cihazlar için değil aynı zamanda farklı ekran boyutları için de kullanılabilir hale getirildi. Bu sayede, kullanıcılar farklı ekran boyutlarına sahip cihazlar kullansalar bile Link bileşenlerini daha doğru bir şekilde kullanabiliyorlar.

Bununla birlikte, bu güncelleme ile birlikte Link bileşenleri daha etkili ve performanslı bir yapıya kavuştu. Böylece, React Router v6 kullanıcılar için daha iyi bir deneyim sunarken, geliştiriciler için de daha kolay bir kullanım sağlamış oldu.

Özel Hooklar Artık Daha Güçlü

React Router v6, web uygulamaları geliştirirken daha fazla özelleştirme yapmayı mümkün kılan daha güçlü özel Hooklar sunar. Geliştiriciler, artık özel Hook'ları kullanarak dinamik URL yönlendirmeleri, sayfa geçmişi izleme ve ayrıntılı parametre işleme gibi işlevleri daha kolay bir şekilde gerçekleştirebilirler.

Bunun yanı sıra, yeni güncelleme ile özel Hook'ların gücü artırıldı. React Router v6 artık useNavigate, useParams ve useLocation gibi yeni özel Hook'lar sunar. Bu yeni özellikler, kullanıcıların URL parametreleri üzerinde daha fazla kontrol sahibi olmalarına, dolayısıyla web uygulamalarını da daha esnek ve fonksiyonel hale getirmelerine olanak sağlar.

Her bir Hook, belirli bir işlev için tasarlanmıştır. Örneğin, useParams Hook, URL parametrelerinin çözümlenmesi ve web sayfasına aktarılması işlemlerinde kullanılır. useLocation Hook ise web sayfasının konum bilgilerinin alınmasını sağlar. Böylece, geliştiriciler, URL'nin birçok yönünü ve bilgisini kontrol edebilir ve kullanıcılara daha kişiselleştirilmiş bir deneyim sunabilirler.

Kısacası, React Router v6'nın özel Hooklarının güçlendirilmesi, geliştiricilere daha fazla özelleştirme seçeneği sunar. Böylece, web uygulamaları daha esnek ve fonksiyonel hale gelebilir ve kullanıcılar daha iyi deneyimler yaşayabilirler.

useLocation Hook

React Router v6, önceden kullanılan useLocation Hook'u güncelledi ve yeni sürümde daha işlevsel hale getirdi. useLocation Hook, history.location yerine location nesnesini kullanarak URL adresine ilişkin tüm bilgileri almanıza olanak tanır.

Bu güncelleme, özellikle artan etkileşimler ve dinamik URL'lerle çalışırken çok daha faydalı hale gelir. useLocation Hook ile aşağıdaki özelliklere erişebilirsiniz:

• pathname: URL'nin yolu
• search: URL'deki sorgu parametreleri
• hash: URL'deki hash
• state: Geçiş sırasında prop olarak gönderilen durum

Bu özellikler, react-router-dom kütüphanesi kullanılarak URL adresleriyle işlem yaparken oldukça yararlıdır. Bu sayede daha hızlı ve verimli bir şekilde sayfalar arasında geçiş yapmak mümkündür.

useParams Hook

React Router v6 ile gelen useParams hook, URL'deki parametre değerlerini çekmek için kullanılır. Bu hook, URL'deki parametrelerinizi kullanarak sayfaya veri transferi yapmanıza olanak sağlar.

Örneğin, bir blog yazısı detay sayfasına gidildiğinde, URL'deki parametreleri kullanarak ilgili yazıya erişilebilir. useParams, bu parametreleri çekmek için kullanılır.

Parametre	Değer
:postId	1
:authorId	5

Yukarıdaki örnekte, blog yazısı URL'sinde iki parametre belirtilmiştir. useParams kullanarak, bu iki parametrenin değerlerine erişebiliriz.

• useParams, URL'den özelleştirilmiş verilerin sayfaya aktarılması için oldukça kullanışlı bir tool'dur.
• useParams, diğer Hooks'lara benzer şekilde değerleri değiştirdiğinde bile yeniden render oluşturur.
• useParams'in bu özelliği, sayfalar arasında kolay bir şekilde veri aktarımına olanak sağlar.