React Sayfa Yönlendirme

React ile sayfa yönlendirmek için React Router Dom Navigate komponentini kullanıyoruz. Navigate istenilen bir sayfaya kolayca yönlendirme yapmak için kullanılmaktadır.

Navigate Nedir?

Navigate render edildiğinde kendisine belirtilen konuma yönledirme yapmak için kullanılan bir React Router Dom komponentidir.

React Router Nedir? Nasıl Kullanılır? yazımızda bu paketi ayrıntılı inceleyebilirsiniz.

React Router Navigate Kullanımı

Navigate komponentinin söz dizimi aşağıdaki gibidir.

<Navigate to="gitilecek_sayfa" replace={bool} />

Bu komponent iki parametre alır.

• to gidilecek sayfayı belirtir. Route ayarlarına tanımlanmış olmalıdır.
• replace history içerisinde yeni bir kayıt oluşturulup oluşturulmamasını belirtir. Eğer true ise eski kayıta geri dönder.

Navigate komponentinin kullanılması için React Router Dom kurulmuş olmalı ve gerekli ayarlamaların yapılmış olması gereklidir. Sonrasında bu komponenti kullanabiliriz.

React Router Dom Outlet Adım Adım Örnek Uygulama yazısındaki örnek uygulama aydınlatıcı olacaktır.

Tüm gerekli ayarlamalar yapılmış bir uygulamada Navigate kullanımı aşağıdaki gibidir.

import React, {useState} from "react";
import { Navitage } from "react-router-dom";

export default function Hakinda() {
    const { yonlendir, setYonlendir} = useState(false);
    const handleClick = (e) => {
        e.preventDefault();
        setYonlendir(true);
    }
    return ( 
        <div>
            <h1>Hakkımızda</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas porro, dolore excepturi at cum harum aliquam laudantium. Quam, molestias in ipsum facilis itaque autem similique! Nemo minima ipsa quos!</p>
            { yonlendir && <Navigate to="/home" replace={true} />}
            <button onClick={handleClick}>Ana Sayfa</button>
        </div>
    )
}

Örneğimizde Hakkinda kompenenti oluşturduk. Bu komponent içerisinde yönlendirme için state üzerinde yonlendir değişkenini tanımladık ve onu değiştirmek için kullanacağımız setYonlendir metodunu oluşturduk. Ön tanımlı olarak yonlendir değişkeninin değerini false yaptık.

Sonrasında bir buton tanımladık ve butona tıklandığı zaman çağrılan handleClick fonksiyonu üzerinden setYonlendir metodunu çağırdık ve yonlendir değişkeninin değerini true yaptık.

{ yonlendir && <Navigate to="/home" replace={true />}

Satırı yönlendirmenin çağrıldığı alandır. Burada eğer yonlendir değişkeni false ise Navigate çağrılmaz. Fakat butona tıklanıpta yonlendir değişkeni true yapıldığında Navigate komponenti render edilecek ve sonradında da bu komponent kendine verilen /home sayfasına yönlendirme yapacaktır.

React Redirect

React Router Dom paketi 6. sürümden önce Redirect komponentini yönlendirme için kullanıyordu. 6. sürüm ile birlikte bu komponet yerini Navigate komponentine bıraktı.

İlgili olarak React Router Redirect Nasıl Kullanılır? yazımızı inceleyebilirsiniz.

Sonuç

React sayfa yönlendirme işlemi için Navitage komponentini kullanır. Bu komponent React Router Dom ile gelmektedir. Eğer farklı bir router paketi kullanılıyorsa o paketin incelenmesi gereklidir.

React JS ile ilgili sorularınızı bize yorumlardan gönderebilirsiniz.