REACT ROUTING

React Router — 3 (Data Passing & Lazy Load)

React Router üzerinden analizlerimize devam ediyoruz. İlk iki yazıda Routing Temel Kavramları ve React Router hakkında başlangıç yapmıştık

Onur Dayıbaşı

Published in

Frontend Development With JS

3 min readFeb 12, 2022

1. Program ile Bir Sayfaya Yönlendirme

Web uygulamasında sadece linkler ile değilde bazı durumlarda program ile direk başka sayfalara otomatik yönlendirme ihtiyacınız olabilir. Örneğin kullanıcı yetkisi olmayan birisi iç sayfalara girmek istediğinde onu Landing sayfasına yönlendirmek gibi..

React-Router 6 öncesi

-> props.history.push("/landing") //Imperativeveya->  <Redirect to="/landing" /> //Declerative

React-Router 6

const navigate = useNavigate()
navigate('/landing')veya -> <Navigate to='/landing'/>

Bu yönlendirmeyi 2 yöntemle Imperative veya Declerative olarak yapabiliriz. Bu farkı anlamak için Imperative/Declarative Programlama yazımı okuyabiliriz.

2. Routing Sırasında Bileşene Ekstra Prop Geçirme

Biz Route tanımlaması sırasında path ile bileşeni birleştiriyoruz. Fakat bu route işlemi sırasında Comp (LandingPage) → match,location ve history props geçtiğini söylemiştik

<Route path="/landing" component={LandingPage}

Peki biz ekstra ortam ile ilgili özellikleri bu bileşene nasıl geçebiliriz.

React-Router 4

React Router 4 Render Props olarak render işlemi sırasında parametreleri geçirebilir. Code Sharing → RenderProps

<Route path="/landing". render={(props) => <LandingPage {...props, ...extraProps} isExtra={true} />

İkinci bir yöntem Component direk tanımlamak yerine arada fonksiyon çağırarak component döndürmek…

<Route path="/landing". component={() => <LandingPage isExtra={true} extraProps={extraProps}/>

React-Router 5

React Route diğer children olarak tanımlayabilme imkanı ile içerisine React yöntemi ile prop verebilirsiniz.

<Route path="/landing">
      <LandingPage isExtra={true} />
</Route>

3. Link Bileşeni veya Program ile Birlikte Ekstra Prop Geçirme

Normalde bir önceki blog yazısında URL tasarımında bir sayfanın içerisindeki parametrik değerlerden bahsetmiştim.

URL Params
Search Params
Hash

Bu değerler genelde belli bir uzunlukta olabilir. Peki bizim bu <Link> yönlendirmesi Redirect veya history.push ile birlikte ekstra komplex bir objeyi nasıl parametrik geçebiliriz

Aslında WebAPI History APIsine bakarsak. push fonksiyonunun state değeri tutabildiğini görürsünüz.

https://developer.mozilla.org/en-US/docs/Web/API/History/pushState

Aynı şekilde ….. Link, Redirect, Navigate gibi nesnelerinde ekstradan state değeri taşılabildiklerini ve bu yöntemle kompleks nesneleri parametrik olarak yönlendirilen sayfada kullanabilmek imkanı sunar.

<Link. to={{ pathname: "/landing",state: {extraInfo: true}}}>
  Landing Page
</Link>

Yukarıdaki şekilde sayfa yönlendidiğinde bu bilgiye aşağıdaki gibi Location üzerinden erişebilirsiniz.

Router 4
const { extraInfo} = this.props.location.stateRouter 5
const location = useLocation()
const { extraInfo } = location.state

4. Lazy Loading & Code Splitting

Bu konuyu Lazy Loading yazısında detaylı olarak değinmiştim. Özellikle tüm bileşeneri ve sayfaları ilk baştan tek seferde yüklemek ciddi bir performans sorunu oluşturabilir. Bundan dolayı ihtiyaç duyunca ilgili sayfanın yüklenmesi ve bu şekilde mimari oluşturulması oldukça önemlidir.

Örneğin yukarıdaki resimde Page4 görüntülemek istediğimizde Page4 ve buna bağlı LibA,LibB ve LibC nin yükleneceği , diğer sayfalar ve kütüphanelerin yüklenmediği bir sistem oluşturmak oldukça önemlidir.

React bir kütüphaneyi parçalı şekilde, sonradan yüklemek için ES6 import modulüyle birlikte Suspense ve React.lazy yapılarına ihtiyaç duyarız.

https://reactjs.org/docs/code-splitting.html#reactlazy

Bunu benim üzerinde çalıştığım dijital bahçeye uyguladığımda, içerisinde ne kadar örnek olursa olsun sadece ilgili örnek yüklendiğinde bunun ile ilgili kütüphane ve kodların yüklenmesini sağlıyor.