Çözüldü: tepki yönlendirici yeniden yükleme sayfası bulunamadı

React Router yeniden yükleme sayfası bulunamadı ile ilgili ana sorun, bir kullanıcı sayfayı yenilediğinde, tarayıcının sunucuya mevcut URL için bir istekte bulunmaya çalışmasıdır. Ancak, React Router istemci tarafı yönlendirme olduğundan, URL için karşılık gelen sunucu yolu yoktur ve bu nedenle 404 Bulunamadı hatası döndürülür. Bu, özellikle kullanıcılar belirli içeriğin yenileme sırasında görünmesini bekliyorsa sorunlu olabilir.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </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 kodunu döndüren App adlı bir işlevi tanımlar.

// Satır 5: Bu satır, reaksiyon-yönlendirici-dom'dan bir Yönlendirici bileşenindeki tüm JSX kodunu sarar.

// Satır 6: Bu satır, reaksiyon-yönlendirici-dom'dan bir Switch bileşenindeki tüm yolları sarar.

// Satır 7 – 9: Bu satırlar, ilgili bileşenleriyle (Ana Sayfa ve Hakkında) sırasıyla '/' ve '/about' için iki rota tanımlar.

// Satır 11 – 12: Bu satırlar, başka hiçbir rota eşleşmediğinde, “Sayfa bulunamadı” diyen bir h1 etiketi oluşturan bir rota tanımlar.

Sayfa bulunamadı hatası

React Router'da sayfa bulunamadı hatası, bir kullanıcı var olmayan bir sayfaya veya rotaya erişmeye çalıştığında oluşan bir hatadır. Bu, kullanıcı URL'yi yanlış yazdığında veya erişmeye çalıştığı sayfa kaldırıldığında veya taşındığında meydana gelebilir. React Router'da bu hata, bileşenin oluşturma desteği ve 404 sayfası döndüren bir işlevde geçiş. Bu, geliştiricilerin yardımcı bağlantılar veya bir özür mesajı gibi istedikleri içeriğe sahip özel 404 sayfaları oluşturmalarına olanak tanır.

Tepki yönlendiricisinde Sayfa bulunamadı ile nasıl başa çıkarım

React Router'ı kullanırken, URL mevcut yollardan hiçbiriyle eşleşmediğinde bir NotFound bileşeni oluşturacak özel bir yol oluşturarak bulunmayan bir sayfayı işleyebilirsiniz. Bunu yapmak için yolu “*” olarak ayarlanmış yeni bir rota oluşturmanız ve NotFound bileşeninizi oluşturmanız gerekir.

Örneğin:

} />

Bu, halihazırda mevcut bir rota tarafından eşleşmeyen herhangi bir URL ile eşleşecek ve NotFound bileşeninizi oluşturacaktır.

Tepki veren bir sayfayı yeniden yüklenmeye nasıl zorlarım?

React Router'da, history nesnesinde replace yöntemini kullanarak bir sayfayı yeniden yüklenmeye zorlayabilirsiniz. Bu, geçmiş yığınındaki mevcut girişi yenisiyle değiştirecek ve böylece sayfanın yeniden yüklenmesini zorlayacaktır. Bu yöntemi kullanmak için önce history nesnesine erişmeniz gerekir. Yönlendirici bileşeninizi oluştururken bunu bir destek olarak geçirerek yapabilirsiniz:

const AppRouter = () => (

{/* Buradaki rotalarınız */}

);

Geçmiş nesnesine erişiminiz olduğunda, değiştirme yöntemini şu şekilde kullanabilirsiniz:

history.replace('/bir yol');