Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
Ziyaretçilerinize en çok ihtiyaç duydukları anda yardımcı bir deneyim sunmak için basit bir React rotası kullanarak özel bir 404 sayfası oluşturun.
Er ya da geç, bir kullanıcı web sitenizde olmayan bir URL'yi ziyaret edecektir. Bundan sonra kullanıcının ne yapacağı size kalmış.
Geri düğmesine basıp sitenizi terk edebilirler. Bunun yerine, web sitenizde gezinmeye devam etmelerine yardımcı olacak kullanışlı bir 404 sayfası sağlayabilirsiniz.
React web sitelerinde, yararlı bir 404 bulunamadı sayfası oluşturmak için React yönlendiricisini kullanabilirsiniz.
404 Sayfası Oluşturma
bu 404 hata sunucunun bulamadığı bir web sitesindeki bir sayfayı ziyaret etmeye çalıştığınızda oluşur. Bir geliştirici olarak, 404 hatalarını işlemek, sunucunun istenen sayfayı bulamadığında yedek olarak kullanacağı bir sayfa oluşturmak anlamına gelir.
React'te bunu, var olmayan yollarda işlenecek, bulunmayan bir bileşen oluşturarak yaparsınız.
Bu makale, halihazırda yönlendirme ayarlı çalışan bir React uygulamanız olduğunu varsayar. eğer yapmazsan, bir React uygulaması oluştur ve sonra yükleyin Tepki Yönlendirici.
NotFound.js adlı yeni bir dosya oluşturun ve 404 sayfasını oluşturmak için aşağıdaki kodu ekleyin.
içe aktarmak { Bağlantı } itibaren "react-router-dom";
ihracatvarsayılanişlevBulunamadı() {
geri dönmek (
<div>
<h1>Hata! Kaybolmuş gibisin.</h1>
<P>İşte bazı yararlı bağlantılar:</P>
<bağlantı ='/'>Ev</Link>
<bağlantı ='/blog'>Blog</Link>
<bağlantı ='/contact'>Temas etmek</Link>
</div>
)
}
Bu 404 sayfası, bir kullanıcıyı web sitesindeki ortak sayfalara yönlendirmek için bir mesaj ve bağlantılar oluşturur.
404 Sayfasına Yönlendirme
React router'ı şu şekilde kullanarak normal bir rota oluşturabilirsiniz:
içe aktarmak { Rota, Rotalar } itibaren "react-router-dom";
işlevUygulama() {
geri dönmek (
<Rotalar>
<Rota yolu="/" eleman={ <Ev/> }/>
</Routes>
)
}
URL yolunu ve o rotada oluşturmak istediğiniz öğeyi belirtirsiniz.
404 sayfası, web sitesinde bulunmayan yollar için görüntülenir. Bu nedenle, yolu belirtmek yerine bir yıldız işareti (*).
<Rota yolu='*' eleman={<Bulunamadı />}/>
kullanma * rotalarda belirtilmeyen tüm URL'ler için NotFound bileşenini oluşturur.
React'te Yönlendirme
Bir yönlendirici kullanarak React web uygulamanızda bulunmayan tüm URL'ler için kolayca bir 404 sayfası oluşturabilirsiniz.
Tarayıcıların varsayılan bir 404 sayfası vardır, ancak özel bir sayfa oluşturmak, kullanıcılarınıza neyin yanlış gittiğini ve bunu nasıl düzeltebileceklerini söylemenize olanak tanır. Markanıza uyan bir 404 sayfası da oluşturabilirsiniz.
