React Router Kullanımı
Routing nedir ?
Routing, web sayfalarında gezinme işlemlerini yönetmek ve belirli bir URL’e göre hangi içeriğin görüntüleneceğini belirlemek için kullanılan bir tekniktir. Kısacası, web sayfaları arasındaki geçişleri, URL’leri ve sayfalar arasındaki ilişkileri kontrol etmeye yardımcı olur. Routing, web uygulamalarının çok sayfa yerine tek sayfa (Single Page Application — SPA) olarak çalışabilmesini sağlar.
React da Routing Nasıl Yapılır ?
React projelerinde, kullanıcıların farklı sayfalar arasında geçiş yapabilmesi için react-router-dom kütüphanesini kullanabiliriz. Bu kütüphane, tarayıcıda URL’yi güncellemek ve farklı bileşenlerin görüntülenmesini sağlamak için kullanılır. Aşağıda, BrowserRouter'ı kullanarak temel bir React uygulaması oluşturmanın adımlarını bulabilirsiniz.
Adım 1: react-router-dom Kurulumu
Öncelikle, projenizde react-router-dom kütüphanesini yüklemeniz gerekir. Terminal veya komut istemcisinde projenizin dizininde şu komutu çalıştırarak kütüphaneyi ekleyin
npm install react-router-domKütüphaneyi indirdikten sonra React projenizin index.js dosyasında routing yapısı oluşturarak uygulamanın nasıl yapılandırılacağını ve hangi bileşenlerin hangi URL’lere yönlendirileceğini belirleyebiliriz.
App.js den açılan react uygulamamızda routing yapacağımız componentleri şu şekilde ekleriz.
Route exact ne işe yarar ?
Bu yapı, uygulamanızdaki farklı URL’ler arasında geçiş yapmak için kullanılabilir. exact özelliğinin kullanılmaması durumunda, bir yolu tam olarak eşleştirmek yerine, verilen yolun içeriğine eşleşip eşleşmediği kontrol edilir. Bu, özellikle alt sayfalar veya alt rotaların olduğu durumlarda kullanışlı olabilir.
/yolu ile eşleştiğinde,ProductListbileşeni (<ProductList />) render edilir./cartyolu ile eşleştiğinde,CartListbileşeni (<CartList />) render edilir.- Hiçbir yolu ile eşleşmeyen (yani, yukarıdaki yollar dışındaki tüm yollar) URL’ler için,
NotFoundbileşeni (<NotFound />) render edilir.
Link to nedir?
react-router-dom kütüphanesinde yer alan Link bileşeni, uygulamanızda farklı sayfalar veya rotalar arasında gezinmeyi sağlayan bir bileşendir. Link bileşeni, kullanıcıların belirli bir URL'e tıkladığında uygulamanın farklı rotalarına yönlendirilmesini sağlar. Link bileşeni, sayfa yenilenmediği veya tamamen yeniden yüklenmediği için, uygulamanın daha hızlı ve daha duyarlı olmasını sağlar.
Link bileşeni genellikle navigasyon menülerinde, yanıtlarda, kartlarda, düğmelerde veya herhangi bir yerde kullanılabilir. Kullanıcılar Link bileşenine tıkladığında, ilgili rotaya yönlendirilirler.
React da Routing yapılan örnek projeme aşağıdaki linkten erişebilirsiniz.
