React Routing

React Router — 1 (Temel Kavramlar)

Routing kavramı Web Uygulaması geliştirmeye ilk başladığımız zamandan beri var olan bir konsept. Backbone, Ember, Angular, Vue, React, Svelte kütüphane/framework içerisinde veya yanında hep yer almış ve biz geliştiricilere daha doğru ve kaliteli uygulamalar geliştirecek soyutlamaları sağlamıştır.

Onur Dayıbaşı

Published in

Frontend Development With JS

6 min readFeb 9, 2022

Web uygulamarında bir web sayfasına gittiğinizde ana domain üzerinden alt kırılım ve parametreler ile uygulamanın diğer sayfalarının, ilgili içerikler ile doldurularak renderlenmesini sağlar. Örneğin aşağıda onurdayibasi.com ile onurdayibasi.com/search arasında farklı sayfaların ve içeriklerin gösterilmesi için yapılan işlemlere routing diyoruz.

Özetle routing web uygulamalarında temel teşkil eder ve ilk ui kütüphane/framework ( backbone,ember, angular, react, vue, svelte, react) ya içerisinde yada yanında routing işlemini sizin Web API seviyesinde uğraştırmaktan soyutlayacak kütüphaneler bulunur.

Temelde bu kütüphaneler WebAPI üzerindeki URL API, History API, Location API, SearchParams API ve diğer LocalStorage vb.. apileri kullanarak daha uygulama geliştirmeye yönelik soyutlamalar sağlar.

Öncelikle URL yakından baktığımızda bizim uygulamamızı ayıran temel parçaların hostname/port → sonra gelen pathname, search ve hash birleşiminin oluşturduğu path kısmının neden olduğunu görebilirsiniz.

Burada Router hangi yapı üzerinden bir yönlendirme yapısı kuracaksanız ona göre size ilk baştan bazı alternatifler sunar ve Web API si üzerinde kurguladığınız bazı yapılar Backend çağırımı yapmaz iken bazıları Backend tüm sayfa isteğinde bulunurlar ki bu da SPA(Single Page App) her zaman olsun istiyeceğimiz bir durum değildir.

Routing İle ilgili Web API’ler

1. History API

History API, Kullanıcının gezmiş olduğu URL tutarak bunun üzerinde ileriye ve geriye gitmeyi sağlar. Lenght bilgisi sıfırsa mesela kodda geriye gitme düğmesini iptal edebilirsiniz :)

//window.history
length => kaç tane URL gezmişsin history tutar.back()  => bir germiş sayfaya gider 
forward() =>  bir sonraki sayfaye gider (geri gelmişseniz)
go() =>  // window.history.go(-4);

Burada asıl React gibi SPA (Single Page App) açısından önemli olan pushState bizim URL değişikliklerinde Backend gitmeden browser session bu işlemi yapmamızı sağlar.

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")

Aslında bu yukarıdaki URL değiştiriken eskiden location hash değişikliklerinin backend gitmeden twitter.com/#followers gibi ClientSide JS handle edebileceği yapılar benzer bir çağırım gerçekleşir esasen.

window.location = “#foo”

Client’da peki bu değişimleri nasıl ele alacağız. 2 alternatif var. Ya belli aralıklarsa sayfanızın URL çekip bunu parse edip one göre karar verecek yapılar kuracaksınız veya daha doğrusu onpopstate mevcut URL değişikliklerini anlayıp buna göre davranacaksınız.

window.onpopstate = function(event) {
   alert(`location: ${document.location}, 
          state: ${JSON.stringify(event.state)}`)
}

2. Location API

Location API window.location kodu ile adres çubuğunda yazan URL erişip bunu işlememize olanak sağlar.

https://nodejs.org/docs/latest/api/url.html

Aynı zamanda URL değiştirerek farklı sayfalara yönelmeti

//window.location
href,hostname,protocol,hash, origin, search, pathname => erişmenizi sağlarassign(), replace(), reload() => sayfayı yeniden yüklemeyi veya farklı sayfalara yönelmeyi sağlar.

3. URL API

URL API , href veya bir adresi string olarak aldığınızda bunu parse etmenizi ve veya kendi URL oluşturmanızı sağlayacak altyapıyı sunar. Aşağıda aldığınız bir href üzerinden URL objesi oluşturmayı görebilirsiniz.

Veya bunun yanında kendiniz bir URL objeleri oluşturup bunun hash, host, hostname, href, origin, password, pathname, port, protocol, search, searchParams, username alanlarına erişip değerlerini güncelleyebilirsiniz.

toString ve toJSON ile URL Objesini normalize ederek string ve json dönüştürebilirsiniz.

4. URL Search Params

Search Params API’de aynı URL apide olduğu gibi search parametreleri üzerine gelen parametre string alıp parse edilip bunun üzerinden farklı sorgular yapabilmemizi

veya parametreleri kullanarak search url oluşturmamıza olanak sağlar.

Routing Soyutlaması ve Kavramlar

Web API amacı önceden de söylediğim gibi Tarayıcı ve İşletim sistemi API lerine erişip bunları tetiklemek veya bu kaynaklardan bilgi okumak için kullanılır.

Ama bu seviye bizim Web Uygulamamız için istenilen seviyede bir Routing sağlamaz çünkü bizim aynı zamanda bunların belli bileşenler/sayfalar ile eşlenmesi ve bunların ekrana render tetiklenmesi gerekir.

1. Router

Temelde HistoryAPI ve LocationAPI üzerinden veya bunların benzeri yapılar üzerinden üzerinde çalıştığı tarayıcı, mobil uygulama veya test platformunun kontrolünü sağlar.

BrowserRouter: Bizim yukardaki bahsettiğimiz history API kullanarak sayfa yönlendirmelerini ve ilgili bileşenler ile bağlantılarını yapmamızı sağlar . React CSR yöntemlerinde genelde bu yöntem tercih edilir. History API(pushState, replaceState and the popstate event) kullanarak URL ve UI sync tutar.

https://reactrouter.com/docs/en/v6/api#browserrouter

HashRouter: CSR(Client Side Rendering) yöntemlerinde kullanılan window.location = “#foo” şeklinde server tetiklemeyen yönlendirmelerde kullanılır. pushState özelliğinden sonra kullanılması gerekmediği için # sunucu gereksinimi olmayan sadece sayfa içerisinde bir bölgeye odaklamak ve scroll etme işlemlerinde kullanılabilir. Bu kısımlar yerine komple HashRouter ihtiyacı genelde olmaz.

https://reactrouter.com/docs/en/v6/api#hashrouter

Bunun haricinde

React Native Uygulamalarında kullanabileceğiniz NativeRouter,
Server Side Rendering işlemlerinde kullanabileceğiniz StaticRouter
Test Senarylarında kullanabileceğiniz MemoryRouter
ve kendi history objenizi verebileceğiniz unstable_HistoryRouter bulunur

2. Routes ve Route

Aslında Route dediğimiz şeyler bir path ve bu path bağlanacak olan bileşen tanımlamalarıdır.

Örneğin aşağıdaki örnekte Routes → içerisinde render edilebilen Route bileşenlerini görebilirsiniz. Route temelde bir path ve buna bağlı render edilecek element bileşeni vermeniz. Bunun arka planda react-router algoritmaları tarafından match (eşleştirilmeye) çalışıp eşleşen bileşene göre render edilmesini sağlar.

https://reactrouter.com/docs/en/v6/api#routes-and-route

3. Link

Biz URL değişimleri için aslında <a href…> veya window.location.href veya bunlar üzerinden APIleri assign(), replace(), reload() kullanabiliriz.

Ama SPA (Single Page App) için bize

history.push gibi sunucya gitmeden URL değişikliği sağlayıp bileşenle binding sağlatacak
Hemde sağ tıklamada linkte opsiyonlar sunması veya Cmd/Ctrl+Click ilgili sayfayı yan tab da açmayı sağlayacak bir bileşene ihtiyaç duyarız.

Link bileşeni to ile ilgili path yönlendirme işlemini gerçekleştirir. http/https path ile tüm bir linke yönlenebiliren, direk parametre olarak verildiğinde ilgili root path eklenerek bir yönlendirme gerçekleştirir.

NavLink: Link’in aktiflik durumunun önemli olduğu BreadCrumb ve NavigationMenu veya SideMenu gibi yapılarda kullanılmaya yönelik geliştirilmiştir. NavLink içerisinden isActive → tetiklenmesi durumunda farklı styling atamaları gerçekleştirebiliriz.

4. Navigation

Yukarıda Link <a href> li yapılardan bahsettik. Gelelim şimdi programla başka sayfalara yönlendirme ve redirect etme işine. Bu işlemi

location.replace(href)
location.assign(href)

.assign() browser history yeni bir href eklerken back tuşuna bastığınızda bir önceki ekrana dönebilirsiz. replace() ise history mevcut url değiştirerek mevcut url üzerine yazılması ve back tuşuna basınca mevcut URL dönüş yapılaMAmasını sağlamış olursunuz.

İşte React içerisinde declerative şekilde yapmanızı sağlayan ve bunun renderlenmesi ile sayfayı başka bir URL yönlendirme işlemini gerçekleştiren Navigate bileşenini kullanabilirsiniz.

<Navigate to="/dashboard" replace={true} />

5. Outlet

Outletler ParentRoute (Dashboard)→ ChildRoute (message, task) olduğunda , Outlet bileşeni child route bileşenlerininde elemanlarını render edilemesine olanak sağlıyor.