Programlı yönlendirme

useNavigate ile kod içinden sayfa değiştirmeyi öğrenirsin.

Programlı yönlendirme

Bazen bir buton tıklaması veya form gönderiminden sonra programlı olarak başka sayfaya gitmen gerekir. Link yerine useNavigate hook'unu kullanırsın.

const navigate = useNavigate(); ile bir fonksiyon alırsın. navigate('/home') çağrısı yeni yola gider; navigate(-1) bir adım geri döner.

Form gönderiminde başarı durumunda yönlendirme, oturum kapatma sonrası giriş sayfasına gitme veya zamanlayıcı ile yönlendirme yaygın kullanımlardır.

useNavigate kullanımı

useNavigate bir fonksiyon döndürür. İlk argüman yol dizesi veya sayı olabilir. İkinci argüman seçenekler içerir: { replace: true } geçmişe yeni kayıt eklemeden mevcut kaydı değiştirir.

Örnek: oturum kapatma butonu replace: true kullanırsa kullanıcı geri tuşuyla tekrar korumalı sayfaya dönemez. state ile sonraki sayfaya veri taşıyabilirsin: navigate('/login', { state: { from: '/panel' } }).

Hedef sayfada bu veriyi useLocation().state ile okursun.

Uygulama Çıkış butonu

Aşağıdaki iskeleti tamamla. LogoutButton bileşeni yaz; useNavigate ile navigate al ve bir <button onClick={() => navigate('/login', { replace: true })}>Çıkış</button> döndür. Dışa aktar.

Örnek çözümü göster

import { useNavigate } from "react-router-dom";

function LogoutButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate("/login", { replace: true })}>Çıkış</button>;
}

export default LogoutButton;

Kendini test et

navigate(-1) ne yapar?
- Ana sayfaya gider
- Rotayı sıfırlar
- Sayfayı yeniler
- Bir adım geri döner
Cevabı göster

Bir adım geri döner — navigate(-1) tarayıcı geçmişinde bir adım geri döner.

navigate çağrısı

const navigate = ____;

Cevabı göster

const navigate = useNavigate();

Programlı yönlendirme: kavramları eşleştir

useNavigate

Fonksiyon verir
navigate('/x')

Yola gider
navigate(-1)

Geri döner
{ replace: true }

Kaydı değiştirir

Sıradaki ders: Özet - İleri router

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler