React Router Redirect Nasıl Kullanılır?

Bulunulan sayfadan farklı bir yere yönlendirme ihtiyacı olduğunda Redirect kullanıyoruz. Normal Link kullanımından farklı olarak sayfa render edilirken bulunulan adresi farklı bir adres ile değiştir. Farklı parametreler alan bu işlev React Router V6 da kaldırılarak yerini Navigate işlevine bıraktı.

Redirect Kullanımı

Bir sayfada yönlendirme yapacağımız zaman yapmamız gereken ilk olarak

import { Redirect } from 'react-router-dom';

şeklinde import etmek ve sonrasında yönlendirilecek sayfayı to parametresi ile belirterek kullanmaktır.

<Redirect to='/userhome' />

Mesela login sayfasına giriş yapıldığında üye giriş yaptı ise üye sayfasına yönlendirme yapmak, aksi halde login sayfasını göstermek isteyebiliriz.

if(users) <Redirect to='/dashboard' />;
else <ShowLoginForm />

push Parametresi

Boolean bir değer alır, yönlendirme yapılırken historye yeni bir girdi yapılması istedendiğinde true olarak ayarlanır. Aksi halde bulunulan linkin yerine (üzerine) yazılacaktır.

<Redirect push to="/gidilecekyer" />

from Parametresi

Verilen regexp ifadesi ile eşleşen tüm sayfaları yönlendirmek için kullanılır. from parametresinde eşleşen sayfa to parametresi ile verilen sayfaya yönlendirilir.

<Switch>
  <Redirect from="/eski-path" to="/yeni-path" />
  <Route path="/yeni-path">
    <Place />
  </Route>
</Switch>

exact Parametresi

Bu parameter kullanıldığında tam olarak path eşleşmesi istenir. Eğer tam eşleşme yoksa yönlendirme yapılmaz.

<Switch>
  <Redirect exact from="/" to="/home" />
  <Route path="/home">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
</Switch>

sensitive Parametresi

Adresin büyük küçük harf duyarlı olması için kullanılır.

React Router V6 Navigate

React Router V6 ile birlikte Redirect işlevi kaldırıldı ve yerine Navigate işlevi geldi.

    ...
    <Navigate to='/yeni-path' />
    ...

Şeklinde kullanılır.

Sayfa Render Edilirken Farklı Adrese Yönlendirmek

Redirect bir sayfa render edilirken, belirli şartlar oluştuğunda farklı bir adrese ( sayfaya ) gitmek istediğimizde kullanılır. Mesela üye girişi yapmış bir kullanıcı bir şekilde login veya register sayfasına gitmek istediğinde, bu sayfaların görüntülenmemesi gerekir. Onun yerine mesela anasayfaya veya üye sayfasına (dashboard) yönlendirme daha faydalı olacaktır. Bu gibi durumlarda Redirect kullanıyoruz. Eğer kullandığınız React Router sürümü 6 ise Navigate işlevini kullanıyoruz.

React Router Nedir? sayfasında React Router ile ilgili daha detaylı bir açıklama bulabilirsiniz.

Redirect ile ilgili yaşadığınız bir sorun oldu mu? Bizimle paylaşır mısınız?