Programlı yönlendirme
- React kursu
- Orta seviye
- Ders 43/80
- 4 dk
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.
Başlangıç kodu
import { useNavigate } from "react-router-dom";
// LogoutButton bileşenini buraya yazÖrnek çözüm
import { useNavigate } from "react-router-dom";
function LogoutButton() {
const navigate = useNavigate();
return <button onClick={() => navigate("/login", { replace: true })}>Çıkış</button>;
}
export default LogoutButton;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 navigate(-1) ne yapar?
- Ana sayfaya gider
- Rotayı sıfırlar
- Sayfayı yeniler
- Bir adım geri döner Doğru cevap
Açıklama: navigate(-1) tarayıcı geçmişinde bir adım geri döner.
2 navigate çağrısı
const navigate = ____;const navigate = useNavigate();Açıklama: useNavigate() bir fonksiyon döndürür.
3 Programlı yönlendirme: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
useNavigate |
Fonksiyon verir |
navigate('/x') |
Yola gider |
navigate(-1) |
Geri döner |
{ replace: true } |
Kaydı değiştirir |