Cara Membuat Halaman 404 di React Menggunakan React Router

Buat halaman 404 khusus menggunakan rute React sederhana untuk memberi pengunjung Anda pengalaman yang bermanfaat saat mereka sangat membutuhkannya.


Cepat atau lambat, pengguna akan mengunjungi URL yang tidak ada di situs web Anda. Apa yang dilakukan pengguna setelah ini terserah Anda.


Mereka mungkin menekan tombol kembali dan meninggalkan situs Anda. Sebagai gantinya, Anda dapat memberikan halaman 404 yang berguna untuk membantu mereka terus menavigasi ke situs web Anda.

Untuk situs web React, Anda dapat menggunakan router React untuk membuat halaman 404 tidak ditemukan yang berguna.


Membuat Halaman 404

Kesalahan 404 terjadi saat Anda mencoba mengunjungi halaman di situs web yang tidak dapat ditemukan oleh server. Sebagai pengembang, menangani kesalahan 404 berarti membuat halaman yang digunakan server sebagai pengganti ketika tidak dapat menemukan halaman yang diminta.

Di React, Anda melakukan ini dengan membuat komponen yang tidak ditemukan yang akan dirender pada rute yang tidak ada.

Artikel ini mengasumsikan Anda sudah memiliki aplikasi React yang berfungsi dengan pengaturan perutean. Jika tidak, buat aplikasi React lalu instal React Router.

Buat file baru bernama NotFound.js dan tambahkan kode berikut untuk membuat halaman 404.

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>
)
}

Halaman 404 ini menampilkan pesan dan tautan untuk mengarahkan pengguna ke halaman umum di situs web.

Perutean ke Halaman 404

Anda dapat membuat rute normal menggunakan router React seperti ini:

See also  Cara Mendapatkan Data Harga Saham Menggunakan Python

import { Route, Routes } from "react-router-dom";
function App() {
return (
<Routes>
<Route path="/" element={ <Home/> }/>
</Routes>
)
}

Anda menentukan jalur URL dan elemen yang ingin Anda render pada rute tersebut.

Halaman 404 ditampilkan untuk jalur yang tidak ada di situs web. Jadi, alih-alih menentukan jalur, gunakan tanda bintang (*).

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

Menggunakan * merender komponen NotFound untuk semua URL yang tidak ditentukan dalam rute.

Perutean di React

Anda dapat dengan mudah membuat halaman 404 untuk semua URL yang tidak ada di aplikasi web React Anda menggunakan router.

Browser memiliki halaman 404 default tetapi membuat halaman khusus memungkinkan Anda memberi tahu pengguna Anda apa yang salah dan bagaimana mereka dapat memperbaikinya. Anda juga dapat membuat halaman 404 yang sesuai dengan merek Anda.