Mala Anlatır Gibi React — 7: Yönlendirme Paketi / react-router-dom

React’da, sayfalardan sayfaya geçiş yapmak için, kullanılan bir paket, kabaca bir tâbir ile.

Paketi yüklemek için: npm i react-router-dom

Genel bir iskelet ve <Route /> tanımı:

import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'

<Router>
  <Routes>
    // route'lar buraya gelecek.
    <Route path="/" element={<App />} />
    <Route path="/menu" element={<Menu />} />
  </Routes>
</Router>

Route’larımızı gördünüz. Neden “/” var? Çünkü “/” demek, ilk sayfayı açtığınız yer. Yani localhost:3000'e girdiniz değil mi, direkt orası.

Burada <Route /> içerisine yazdığımız şeyler, path= {}tanımladığımız yer, element={} ise o linke gittiğimiz de gelecek içerik.

Meselâ “/menu” adlı yere gidelim. <Menu /> component tanımlamışız ama eğer element={<h1>Merhaba menü sayfasındasınız</h1>} diye tanımlasaydık, ve localhost:3000/menu diye gitseydik, bizim karşımıza h1 etiketlerinin içerisinde yazdıklarımız gelecekti.

(Görsel, I.)

Yönlendirme için <Link />

<Link to="/"> Anasayfa </Link>
<Link to="/"> Menü </Link>

Link, react-router-dom paketi içerisinden gelir. to=”” ile beraber gideceğimiz yeri yazarız, aynı <a href=””></a> etiketi görevi görür.

Paket kullanımı için, basit şeyler.

İç içe yölendirmeler

<Route path="/submenu" element={<Menu />}>
  <Route path="submenu" element={<Submenu />} />
</Route>

İç içe yönlendirme ne demek? /menu/submenu diye bir url ile erişiriz. Yani alt yönlendirme diyebiliriz, kısaca ve kabaca.

Meselâ mantıkî olarak bir ürün sayfanız olduğunu düşünelim. /menu/yemekAdi gibi olabilir. Ya da, alt kategori de farklı tür içerikler koyacaksınız onun içinde olabilir.

Şimdilik bunları bilmeniz yeterli. Sonrasıda, react-router-dom ile ilgili yine yazı gelecek.