REACT ROUTING

React Router — 2 (Routing & Paramater Types)

Bu kısma kadar Routing Web Uygulalamaları için önemli olduğu ve bunun için Web API nin üzerinde bir soyutlama katmanı ile bir çok kütüphane yazıldığından bahsetmiştik. Bu yazıda Routing , biraz React Router nasıl ele aldığını inceleyeceğiz.

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readFeb 10, 2022

Serinin ilk yazısında Web Uygulaması, Routing Nedir -1 Routing temel kavramları ve Web API kısmından bahsetmişken bu yazıda daha çok React Router kütühanesinin neler sağladığı üzerinde duracağız.

1. Routing Types

A. Basic Routing

React Router sayfasında Basic örneğini analiz edelim. Bir uygulamanın sayfalardan oluşuyor olsun.

Bu örnekte sayfalar Home, About ve Dashboard olsun.

İkinci konu hangi pathlerde hangi sayfaların çizileceği konusu, pathleri belirleyelim.

"/" -> Home Page Path
"/about" -> About Page Path
"/dashboard" -> Dashboard Page Path

Üçüncü konu bizi bu path yönlendirecek Link bileşenlerinin tanımlanması. Bu linkler bizim ekranda yönlendirme elemanları sağlamış oluyor.

Dördüncü olarak bileşenler ile path arasında bir mapping tutacak şekilde Route elemanlarını oluşturma. Bu maplama sayesinde ilgili url değişikliği olduğunda Router buna uygun match işlemini yapıp, eşleşen bir Route bulursa bununla birlikte component ekrana çizme işlemini gerçekleştiriyor.

Bu kısımda exact path yani Home çizilebilmesi için / sadece root path olması, diğerlerinde /about veya about/… yazılsada farketmiyor.

Burada diğer bir önemli konu Router nesnesinin bütün bu yapıları yönetmesi, bunun içerisinde geçen tüm match vs.. işlemleri yönetip ona göre rendering işlemini gerçekleştirir..

B. Nested Routes

Bazen oluşturduğumuz path içerisinde alt routeların renderlenmesine ihtiyaç duyarız. Aşağıdaki örnek Dynamic Route belirli bir path altında iç içe route tanımlama yöntemi ile Sag taraf sabit iken , sol kısımdaki beyaz alanın dinamik oluşturulmasını sağlayabiliyoruz.

-> RouteA
-> -> RouteB
-> -> RouteC
-> -> ->RouteC_01gibi iç içe Route bileşenleri tanımlayıp bunların birlikte render edilebileceği composable (kapsayıcı yapılar oluşturabilirsiniz.)

Nested Route lar oluşturabilmek için 2 temel konuyu iyi anlamak gerekiyor

1. İç içe oluşturacağımız yapılarda match üzerinden parent path alarak parametrik veya statik child route tanımlamak.

2. Parent Route exact => exact={false} vermek aksi taktirde child route render etmek mümkün olmayacaktır. Önce parent bileşeni render edip sonra bunun içerisinde tanımlanan Link ve Route render ederek bunlarında aktif olması sağlanır.

2. URL Design

A. URL Parameters

Biz bir sayfaya yönlendik buradaki içeriklerin parametrik olmasını isteyebiliriz. Örneğin bir Account sayfası, bir E-Ticaret sayfasında belli kişilere veya satış mağzalarına göre özelleşen sayfalar yapmak istediğimizde bu kısımda bulunan kişi/kullanıcı veya mağza parametrik olmasını isteriz.

Bir diğer isteğimizde bu parametrik verileri alıp sunucudan bunun ile ilgili bilgileri çekip verinin ekranda gösterilmesini sağlatmak gerekiyor.

URL Params örneğini analiz edelim.

Bu parametrik verinin kaç tane olacağı sizin belirleyeğiniz routes içerisindeki path tanımında verilir.

React-Router4 ise bu işler sınıf bileşenler ile gerçekleştirildiği için routes render edilirken içerisinde match , history ve location prop render edilir bunlar üzerinden parametrik veriye erişebilirsiniz.

Aşağıda gördüğünüz gibi React Router yaptığı işlem ilgili URL sayfayı eşleştirmek, ve sayfa bileşenini render etmek bu sıradada match parametrelerini ve history, location WebAPI sini bileşenin içerisine geçirme işlemini gerçekleştirir.

React Router 5.1 sonrasında

React Hook yaklaşımı olan useParams URL Parametrelerine erişebilirsiniz.

<Route path=’:handle’ element={<Company/>} />
const { handle } = useParams()

B. Search Parameters

Belli bir sayfa içerisinde bazen veri üzerinde extra filtreleme, arama, query, veya pagination bilgileri taşıma ihtiyacınız, varsa bunları search parametreler ile taşıyabilirsiniz.

https/example.com/user/odayibasi/tests?filter="abc"&page=12

Bu bilgileri URL parametreleri olarak da taşıyabilirsiniz ama sanki yapısal olarak sayfadaki ana içeriği göstermek için URL parametreleri kullanılırken ekstra arama, bu verinin içerisindeki bir takım kısımlara odaklanma sırasında SearchParameters daha uygun ve anlaşılır bir URL izlenimi oluşturur.

this.props.location.search -> "?filter=abc&page:12"

Bu bilgileri nasıl parse edip kullanacağımıza gelirsek. Aşağıdaki 2 kütüphaneden de faydalanarak search parametrelerine rahatlıkla ulaşabiliriz

Web API’deki URL Search Params API
Query Strings

React Router 5 sonrası

const { search } = useLocation()
const values = queryString.parse(search)

React Router 6 sonrası

import { useSearchParams } from 'react-router-dom'
const filter= searchParams.get('filter')
const page= searchParams.get('page')

C. Hash Parameters

Önceden de anlattığım gibi History.pushState yapısı sonrasında HashRouter kullanılması pek tercih edilen bir yöntem değil.

Ama #… sayfa içerisinde kalıcı olmayacak örneğin dışarıdan sayfanın bu kısmına odaklan deyip sonrasında 1 kere o işlem yapıldıktan sonra, mesala sayfanın veya kodun ilgili pozisyonuna odaklandıktan sonra, hash bilgisi silinerek işlemlere devam etmek güzel bir uygulama URL stratejisi olabilir.

window.location.hash -> #lineNo=120
                        #lastLine...

Referanslar

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara (React Router) erişmek için bu linke tıklayabilirsiniz.