Yönlendirme ve 404
- React kursu
- Orta seviye
- Ders 48/80
- 5 dk
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.
Başlangıç kodu
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
// App bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 404 yolu nasıl yazılır?
- path="none"
- path="*" Doğru cevap
- path="?"
- path="404"
Açıklama: path="*" hiçbir yol eşleşmediğinde çizilir.
2 Navigate ile yönlendirme
import { Navigate } from "react-router-dom";
function Old() {
return <____ to="/new" replace />;
}import { Navigate } from "react-router-dom";
function Old() {
return <Navigate to="/new" replace />;
}Açıklama: Navigate to ile yönlendirme yapılır.
3 Yönlendirme ve 404: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
path="*" |
404 yolu |
Navigate |
Yönlendirme |
to |
Hedef yol |
replace |
Geçmişi değiştirir |