React Router 404 yönlendirmesiyle ilgili temel sorun, uygulanmasının zor olabilmesidir. React Router yerleşik bir 404 sayfasına sahip olmadığından, geliştiricilerin 404 sayfası için manuel olarak bir rota oluşturması ve ardından yönlendiriciyi mevcut bir rota ile eşleşmeyen istekleri yeniden yönlendirecek şekilde yapılandırması gerekir. Bu, zaman alan ve bir şeyler ters giderse hata ayıklaması zor olabilen ek kod ve yapılandırma gerektirir. Ek olarak, bir kullanıcı doğrudan var olmayan bir URL'ye giderse, 404 sayfasına yönlendirilmek yerine yine bir hata sayfası görecektir.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
{/* 404 Redirect */}
<Route render={() => (<Redirect to="/" />)} />
</Switch>
</Router>
);
// Satır 1: Bu satır, tepki-yönlendirici-dom kitaplığından BrowserRouter, Route ve Switch bileşenlerini içe aktarır.
// Satır 3: Bu satır, JSX'i döndüren App adlı bir işlevi tanımlar.
// Satır 5-7: Bu satırlar, React-router-dom'dan bir Router bileşenindeki App bileşenini sarar.
// Satır 8-10: Bu satırlar sırasıyla Ana Sayfa ve Hakkında bileşenleri için iki yol tanımlar.
// Satır 12: Bu satır, başka bir rota eşleşmezse Ana sayfaya yönlendiren bir rota tanımlar.
404 Hata Kodu Nedir?
React Router'daki 404 hata kodu, istenen kaynağın bulunamadığını gösteren bir HTTP durum kodudur. Genellikle bir kullanıcı var olmayan bir sayfaya veya rotaya erişmeye çalıştığında döndürülür. Bu, kullanıcının bir URL'yi yanlış yazması veya sayfanın bağlantıları güncellenmeden kaldırılması veya taşınması durumunda meydana gelebilir. Bu meydana geldiğinde, React Router, kullanıcıyı hatası hakkında bilgilendiren uygun bir mesajla birlikte genel bir 404 sayfası görüntüler.
404 Yönlendirme
React Router'da 404 yönlendirmesi, kullanıcıları geçersiz bir URL'ye erişmeye çalıştıklarında farklı bir sayfaya yönlendirmenin bir yoludur. Bu, kullanıcılara yanlış bir URL girdiklerinde veya var olmayan bir sayfaya erişmeye çalıştıklarında daha iyi bir deneyim sağlamak için yararlı olabilir. 404 yönlendirmesi, kullanıcıyı yönlendirmek istediğiniz sayfanın yol adını belirtmenize izin veren React Router'dan Redirect bileşeni kullanılarak uygulanabilir. Örneğin, birisi /invalid-url'ye erişmeye çalışırsa, Yönlendirme bileşenini şu şekilde kullanabilirsiniz:
