Cara Membuat Halaman 404 di React Menggunakan React Router

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 bernavigasi ke situs web Anda.

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

Membuat Halaman 404

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

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

Artikel ini menganggap Anda sudah memiliki aplikasi React yang berfungsi dengan pengaturan perutean. Jika tidak, membuat aplikasi Bereaksi lalu instal Bereaksi Router.

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

impor { Tautan } dari "bereaksi-router-dom";
eksporbawaanfungsiTidak ditemukan() {
kembali (
<div>
<h1>Ups! Anda sepertinya tersesat.</h1>
<P>Berikut ini beberapa tautan bermanfaat:</P>
<Tautan ke='/'>Rumah</Link>
<Tautan ke='/blog'>Blog</Link>
<Tautan ke='/contact'>Kontak</Link>
</div>
 )
}

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

Merutekan ke Halaman 404

Anda dapat membuat rute normal menggunakan router React seperti ini:

impor { Rute, Rute } dari "bereaksi-router-dom";
fungsiAplikasi() {
kembali (
<Rute>
<Jalur rute="/" elemen={ <Rumah/> }/>
</Routes>
 )
}

Anda menentukan jalur URL dan elemen yang ingin Anda render di rute itu.

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

<Jalur rute='*' elemen={<Tidak ditemukan />}/>

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

Routing di Bereaksi

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

Peramban 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.