Tek sayfa uygulamalarda farklı sayfalara yönlendirme yapmak için kullanabileceğimiz farklı kütüphaneler bulunmaktadır. Bunlar bize kolay ve etkin bir şekilde sayfa yenilemesi yapılmadan, farklı sayfalar arasında gezinme imkanı sunmaktadırlar. Bu işlemin kolayca yapılması bize uygulama geliştirirken zaman kazandırmaktadır. Bu yazımızda bu işlemi yapabileceğimiz ve React geliştiricileri arasında en çok kullanılan yönlendirme kütüphanelerinden biri olan React Router ve onu web uygulamalarında kullanabilmemiz için geliştirilen React Router Dom kütüphanesini inceleyeceğiz.
React Router Nedir?
Web sitelerinde gezerken aynı site içerisinde farklı sayfalar bulunmaktadır ve biz bu sayfalar arasında linkler vasıtası ile rahatlıkla gezebiliyoruz. Yine tek sayfa web uygulamalarında da bir çok sayfa olabilir ve bu sayfalar arasında gezinmemiz gerekebilir. React Router Dom bu işlemin etkin bir şekilde yapılabilmesi ve sayfa yenlenmeden diğer bir sayfaya geçebilmemiz için geliştirilmiş olan bir kütüphanedir. React geliştiricileri arasında router kütüphanalerinden en çok kullanılanı React Router kütüpahanesindir.
Bize etkin şekilde, sayfa yenilenmeden (refresh) diğer bir sayfaya geçmemiz konusunda yardımcı olan bu kütüphane, BrowserRouter, HashRouter, HistoryRouter, MemoryRouter, NativeRouter, Router ve StaticRouter seçenekleri ile gelmektedir.
Biz bu yazımızda BrowserRouter üzerine yoğunlaşacağız ve web uygulaması geliştirirken sayfalar arasında geçiş yapabileceğimiz menü ve linkleri nasıl inşa edeceğimizi göreceğiz.
React Router Dom
React Router kütüphanesi sayfalar arasında gezinmek için bize etkin bir yol sunar. Bunu web uygulamasında kullanabilmemiz için React Router Dom kütüphanesi devreye giriyor. Bu kütüphanede bulunan bileşenler (component) sayesinde uygulama sayfaları arasında gezinmek oldukça kolaylaşıyor.
Bu yazımız React Router Dom 6 temel alınarak hazırlandı. Daha önceki sürümlerde farklılıklar olabilir. Mesela daha önce kullanılan Switch bileşeni 6. sürüm ile birlikte kaldırıldı.
React Router Dom 6 ile bize gelen bileşenler (component) şu şekilde sıralanabilir.
- BrowserRouter, HTML 5 History API üzerine kurulmuştur. Sayfa yönlendirmelerini tutan ana bileşendir. Route yapısı kullanılacak tüm bileşenler / sayfalar BrowserRouter arasında olmak zorundadır.
- Routers, adresi verilen sayfanın görüntülenmesini sağlar.
- Route, bir sayfayı uygulamaya eklemek için kullanılır. Sayfa adresi (url) ve o sayfada çalıştırılacak bileşeni (component) değer olarak alır.
- Link, bir sayfaya link vermek için kullanılan bileşendir. Sayfa adresini alır. Kullanımı HTML A Etiketi gibidir. Fakat A etiketinde olduğu gibi sayfa yenilenmesi olmaz.
- Outlet, bir route altında farklı bir route ( çocuk / child ) göstermek için kullanılır.
- Navigate, program üzerinden istenilen sayfaya gitmek için kullanılır. Kullanıcının bir linke veya butona tıklaması beklenmez.
- NavLink, daha etkili menüler oluşturmak için kullanılır.
BrowserRouter yönlendirme yapılacak tüm bileşenleri kapsamak zorundadır. Yine Routers tüm Route bileşenlerini kapsar. Böylece sayfa adresleri belirtilir.
Link ile gerekli yönlendirme menülerini oluşturabiliriz. Bu ön bilgilendirmeden sonra şimdi de React Router Dom nasıl kullanılır onu görelim.
React Router Dom Nasıl Kullanılır?
Bu bölümde anlatılacak örnek sizin, React ile proje geliştirmeye aşina olduğunuzu varsayımında bulunur. Bu nedenle React, JavaScript, JSX gibi teknolojileri kullanıyor olmanız veya en azında konu hakkında bilginiz olması gerekiyor.
Örnek bir uygulamada react-router-dom nasıl kullanılır onu görelim. Uygulamamızda anasayfa, hakkında ve iletişim sayfası olacak. Şimdi sıfırdan bir uygulama oluşturalım ve neler yapılacağını görelim. Npm paket yöneticisini kullanarak işlemlerimizi gerçekleştireceğiz.
Şimdi react-create-app ile örnek uygulamamızı oluşturmaya başlayalım.
npx react-create-app router-appkomutunu çalıştırdıktan sonra uygulama çatımızın oluşturulmasını bekleyelim. Uygulamamız oluşturulduktan sonra şu şekilde bir dizine sahip olacağız.
React Roter Dom’u kullanmadan önce uygulamamıza eklememiz gerekiyor, bunun için komut satırından aşağıdaki komutu verebiliriz.
npm install react-router-domGerekli yüklemeler yapıldıktan sonra react-router-dom uygulama çatımız altında eklenecektir. Artık React Router Dom ile web uygulamamızda yönlendirme yapabiliriz.
Uygulamamız oldukça basit bir yapıda olacak. İlk olarak create-react-app ile oluşturulan uygulamanın gereksiz bölümlerini silelim ve react-router-dom kütüphanesini uygulamamıza ekleyelim.
import { BrowserRouter as Router, Routes, Route, Link } from ‘react-route-dom’;Şimdi App.js dosyamız aşağıdaki gibi görünecektir.
Uygulamamız içerisinde 3 adet component kullanacağız. Bu componentler basit bir şekilde tasarlanacağı için App.js içerisinde olmasında bir sorun olmayacaktır.
function Home() {
return (
<div>
<h2>Ana Sayfa</h2>
<div>Ana sayfa bu bölümde olacaktır.</div>
</div>
)
}
function About() {
return (
<div>
<h1>Hakkında</h1>
<div>Hakkında sayfası. İçerik eklenecek.</div>
</div>
)
}
function Contant() {
return (
<div>
<h1>İletişim</h1>
<div>İletişim sayfası. İçerik eklenecek.</div>
</div>
)
}React Router Dom kullanılacak ise, uygulamanın ana çerçevesinin BrowserRouter ile sarılması gerekmektedir. Biz BrowserRouteru Router olarak import etmiştik ve bu şekilde kullanacağız. App fonksiyonmuzu aşağıdaki gibi güncelliyoruz. Bu işlemi yaptıktan sonra artık React Route ile sayfa yönelendirmelerini yapabiliriz.
import { BrowserRouter as Router, Routes, Route, Link, useParam } from ‘react-route-dom’;
function App() {
return (
<Router>
</Router>
)
}React Router Dom Link Kullanımı
Şimdi App componenti içerisinde link yapımızı kullanalım. Link verirken A etiketi kullanmıyoruz. Bunun yerine React Router Dom ile gelen Link componentini kullanıyoruz. Bu componenti kullanırken bir path ( yol ) veriyoruz, bu path ilgili componentin çalışacağı adres olacaktır.
<Link to=’/home’>Ana Sayfa</Link>Şeklinde kullanıyoruz. Şimdi App componenti içerisine linklerimizi ekleyelim.
<Router>
<ul className=’menu’>
<li><Link to=’/’>Anasayfa</Link></li>
<li><Link to=’/about’>Hakkında</Link></li>
<li><Link to=’/contant’>İletişim</Link></li>
</ul>
</Router>Harika bir menümüz oldu. Artık bu menu ile uygulamamızın sayfaları arasında gezebileceğiz. Menu bölümü tüm sayfalarda görüntülenecektir. Sayfa içerisinde değişecek bölümlerin Routes içerisinde olması gerekiyor. Şimdi sayfalarımızı menu bölümünün altına eklemeye başlayalım. Bunun için Routes ve Route componentlerini kullanacağız.
React Router İle Route Hazırlama
Routes tüm Route componentlerini içerir ve sayfa adresine göre ( path ) uygun Route bileşenini çağırır. Route ise sayfa için gerekli olan componenti çağıracaktır. Route componenti path ve element olarak iki özellik alır. Path ilgili componentin çalışacağı yolu ve element ise çalıştırılacak componenti belirtir.
<Routes>
<Route path=’/’ element={<Home />} />
<Route path=’/about’ element={<About />} />
<Route path=’/contact’ element={<Contact />} />
</Routes>Uygulamızda eğer hatalı bir adres çağrılırsa ne yapacağız. Bu gibi durumlar için de bir sayfa hazırlayabiliriz. Bu sayfa için path=”*” değerini kullanabiliriz. Burada * tüm adresler anlamına gelir. Böylece olmayan bir sayfa çağrıldığında hazırlamış olduğumuz sayfa gösterilecektir.
function Error404() {
return (
<div>
<h2>Aradığınız Sayfa Bulunamadı</h2>
</div>
)
}Şeklinde hatalı istekler için bir component oluşturalım. Yine basit olması açısından App.js içerisinde tanımlayabiliriz.
Routes componentinin altına yeni bir Route ekleyelim
<Route path=’*’ element={<Error404 />} />Artık uygulamamızda olmayan bir sayfa istendiğinde bir hata sayfası gösterilecektir.
Artık 3 sayfalık uygulamamız kullanıma hazır.
npm start diyerek uygulamayı ayağa kaldırabiliriz.
Uygulamamız çalıştığına göre sayfalar arasında gezinmeye başlayabiliriz. Hangi linke tıklarsa o link ile alakalı belirttiğimiz component çağrılacaktır. Dikkat ettiyseniz Routes etiketinin kapsadığı alan değişime uğramaktadır. Diğer yerler, menü gibi, olduğu gibi kalmaktadır.
Url Üzeride Değişken Kullanımı – useParams
Eğer adres üzerinde bir veya daha fazla değişken kullanacaksak ne yapacağız? Aslında cevabı basit, React Router Dom bu durumlar için useParams hookunu sağlıyor. Bu hook ile adres üzerinden bilgi aktarımı yapabiliyoruz.
Bunu anlatmak için Users adlı bir component hazırladığımızı ve bu componet üzerinde üye listesini tuttuğumuzu varsayalım. Eğer biz bu componentte userId değerini geçirmek isteseydik. Neler yapmamız gerekirdi. Şimdi bunu inceleyelim.
Biz bu uygulamamızda userId değerini Users componenti içerisinde kullanacağız. Eğer istersek farklı bir component ile de çağırabilirdik. Önce Route tanımını yapalım.
<Route path=’/users’ element={<Users />} >
<Route path=’:userId’ element={<Users /> } />
</Route>Bu şekilde öncelikle :userId ile bir değişken tanımını bir Route içerisinde yaptık ve Routeu diğer bir Route ile sardık. Dışardaki Route bizim Users componentine ulaşmamızı sağlıyor. Bunun için users path değerini kullanıyoruz. Sonra içerideki Route compponentine geçmek istediğimiz değişken ismini giriyoruz.
<Route path=’/users’ element={<Users />} >
<Route path=’:userId’ element={<Users /> } />
</Route>şeklinde bir kullanım ile userId adlı bir değişkenin url ile gönderileceğini belirtiyoruz. Yani
https://localhost:3000/users/1şeklinde bir kullanım bizim Users componentine userId=1 değerini geçmemizi sağlıyor. Bunu component içerisinde useParams hooku ile yakalıyoruz.
Function Users() {
const { userId } = useParams();
...
}Artık userId değerini istediğimiz gibi kullanabiliriz. Peki biz linke userId değerini nasıl geçireceğiz? Aslında oldukça kolay. Link componenti tanımlanırken path değeri sonuna userId değerini yazmamız yeterli olacaktır. Mesela userId=5 ve path=’/users’ ise:
<Link path=’/users/5’>Kullanıcı bilgileri için tıklayın.</Link>Şeklinde bir kullanım yeterli olacaktır.
React Router Outlet Nedir?
İç içe oluşturulmuş route işlemlerinde içteki route içeriğinin sayfanın neresinde gösterileceğini belirten React Route komponenti Outletdir. Outlet komponenti, kapsayıcı sayfanın içerisinde, bilginin kullanılacağı yere konulmalıdır. Örneğin Users komponentinde kullanıcılar listelensin ve bu sayfaya users path bilgisi ile ulaşalım. Bu sayfa içerisinde istediğimiz bir kullanıcı bilgisini User komponenti ile sunmak istediğimizde, User komponentini kullanmadan, Users komponenti içerisinde kullacını bilgisinin görüntülenmesini istediğimiz yere <Outlet /> komponentini ekleyerek işlem yapabiliriz. Gerekli yönlendirme route işlemlerini yaptığımız alandan yapılacaktır.
Otomatik Sayfa Yönlendirme – Redirect – Navigate
Bazen bir işlem sonrası bulunduğumuz sayfayı farklı bir sayfaya yönlendirmemiz gerekebilir. Mesela kullanıcı girişi yapıldığında eğer kullanıcı doğru bilgiler ile giriş yaptı ise, kullanıcıyı anasayfaya yönelendirmek istediğimizde ne yapacağız? React Router Dom bu gibi durumlarda Navigate componentini bize sunuyor. Kullanımı oldukça basit.
<Navigate path=’gidilecekAdres’ />Burada eğer tarayıcı geçmişine ( browser history ) yeni bir url eklemek yerine, eski url üzerine yazmak isterseniz replace={true} probunu kullanabilirsiniz. Seçimlik bir parametredir.
<Navigate path=’gidilecekAdres’ replace={true} />Yine istenirse useNavigate hooku da aynı işlem için kullanılabilir. Kulanım şekli aynıdır.
React Router Dom Kullanımı Son Sözler
Tek sayfa React uygulamalarında sayfalar arasında geçiş yapmanın etkin bir yolu React Route kullanmaktır. React Route kütüphanesini hem web sayfalarında ve hemde React Native ile mobil uygulamalarda kullanabiliriz. Web sayfalarında kullanmak için bizim React Router Dom kütüphanesini kullanmamız yeterli olacaktır.
Sayfa yenilemeleri olmadan kolaylıkla uygulama içerisindeki sayfalar arasında gezinmemize olanak veren React Route Dom, url aracılığı ile veri aktarımını ve iç içe sayfa gösterimini desteklemektedir.
BrowserRouter, Routes, Route, Link, Navigate componentleri ve yardımcı hooklar ile kullanabileceğimiz bu kütüphanede useParams hooku ile link üzerinden veri aktarımını da yapabiliriz.
Bu kütüphane ile birlikte kullanabileceğimiz farklı Componentler ve hooklar da olmasına rağmen biz temel kullanacaklarımızı aktardır.
Siz de konu hakkında bilgilerinizi paylaşmak veya soru sormak isterseniz yorum bölümümüzü kullanabilirsiniz.