Yönlendirme ve 404

Sepete git butonu ve 404 sayfasını eklersin.

Yönlendirme ve 404

Son ders 404 sayfasını ve gereksiz yolları yönlendirmeyi ekler. path özniteliğine yıldız karakteri verirsen hiçbir yol eşleşmediğinde o yol çizilir; Navigate bileşeni programlı yönlendirme için kullanılır.

Eski bir yolu yeni yola yönlendirmek için Navigate bileşenini to özniteliğiyle kullanırsın. replace özniteliği geçmişe yeni kayıt eklemez; böylece geri tuşu kaynak yola dönmez.

404 sayfası kullanıcıya nazik bir geri dönüş sunar; ana sayfaya bağlantı vermek yaygın bir yaklaşımdır.

Navigate ile replace

Navigate bileşeni bir rota öğesinin element'i olarak kullanılabilir. to hedef yolu, replace ise geçmiş kaydını değiştirip değiştirmeyeceğini belirler.

replace olmadan geri tuşu yönlendirme kaynağına döner; bu da yönlendirme döngüsü yaratabilir. replace ile geri tuşu kaynağı atlar.

Bu desen eski URL'leri yeni yapıya taşımak için kullanılır; kullanıcı eski yer imlerini açsa bile doğru sayfaya ulaşır.

Uygulama 404 ve yönlendirme

Aşağıdaki iskeleti tamamla. App bileşeni yaz; Routes içinde path="*" ile element={"{"<NotFound />}"} olan bir Route ve path="old" ile element={"{"<Navigate to="/new" replace />}"} olan bir Route daha koy. Dışa aktar.

Örnek çözümü göster

import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="*" element={<NotFound />} />
        <Route path="old" element={<Navigate to="/new" replace />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Kendini test et

404 yolu nasıl yazılır?
- path="none"
- path="*"
- path="?"
- path="404"
Cevabı göster

path="*" — path="*" hiçbir yol eşleşmediğinde çizilir.

Navigate ile yönlendirme

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

function Old() {
  return <____ to="/new" replace />;
}

Cevabı göster

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

function Old() {
  return <Navigate to="/new" replace />;
}

Yönlendirme ve 404: kavramları eşleştir

path="*"

404 yolu
Navigate

Yönlendirme
to

Hedef yol
replace

Geçmişi değiştirir

Sıradaki ders: Layout deseni

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler