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 mevcut olmayan bir URL’yi ziyaret edecektir. Bundan sonra kullanıcının ne yapacağı size kalmış.

Geri düğmesine basıp sitenizden ayrılabilirler. Bunun yerine, web sitenize gitmeye devam etmelerine yardımcı olmak için kullanışlı bir 404 sayfası sağlayabilirsiniz.

React web siteleri için, kullanışlı bir 404 bulunamadı sayfası oluşturmak için React yönlendiriciyi kullanabilirsiniz.

404 Sayfası Oluşturma

404 hatası, sunucunun bulamadığı bir web sitesindeki bir sayfayı ziyaret etmeye çalıştığınızda oluşur . Bir geliştirici olarak, 404 hatalarını ele almak, sunucunun istenen sayfayı bulamadığında ikame olarak kullandığı bir sayfa oluşturmak anlamına gelir.

React’te bunu, var olmayan rotalarda oluşturulacak, bulunamadı bir bileşen oluşturarak yaparsınız.

Bu makale, yönlendirme kurulumuna sahip çalışan bir React uygulamanız olduğunu varsayar. Bunu yapmazsanız, bir React uygulaması oluşturun ve ardından React Router’ı yükleyin .

NotFound.js adlı yeni bir dosya oluşturun ve 404 sayfasını oluşturmak için aşağıdaki kodu ekleyin.

import { Link } from “react-router-dom”;

export default function NotFound() {

    return (

        <div>

            <h1>Oops! You seem to be lost.</h1>

            <p>Here are some helpful links:</p>

            <Link to=’/’>Home</Link>

            <Link to=’/blog’>Blog</Link>

            <Link to=’/contact’>Contact</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 yönlendiriciyi aşağıdaki gibi kullanarak normal bir rota oluşturabilirsiniz:

import { Route, Routes } from “react-router-dom”;

function App() {

    return (

        <Routes>

            <Route path=”/” element={ <Home/> }/>

        </Routes>

    )

}

URL yolunu ve bu rotada oluşturmak istediğiniz öğeyi belirtirsiniz.

404 sayfası, web sitesinde bulunmayan yollar için görüntülenir. Bu nedenle, yolu belirtmek yerine yıldız işareti ( * ) kullanın.

<Route path=’*’ element={<NotFound />}/>

* kullanılması , 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 mevcut olmayan 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. Ayrıca markanıza uyan bir 404 sayfası da oluşturabilirsiniz.