Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi.

Oleh Maria Gathoni
MembagikanMenciakMembagikanSurel

Buat halaman 404 khusus menggunakan rute Bereaksi 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 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.

instagram viewer

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.

Cara Men-deploy Aplikasi React Gratis Dengan Halaman GitHub

Baca Selanjutnya

MembagikanMenciakMembagikanSurel

Topik-topik terkait

  • Pemrograman
  • Reaksi
  • Pemrograman
  • Pengembangan web

Tentang Penulis

Maria Gathoni (55 Artikel Dipublikasikan)

Mary adalah penulis staf di MUO yang berbasis di Nairobi. Dia memiliki gelar B.Sc dalam Fisika Terapan dan Ilmu Komputer tetapi lebih menikmati bekerja di bidang teknologi. Dia telah membuat kode dan menulis artikel teknis sejak 2020.

Selebihnya Dari Mary Gathoni

Komentar

Berlangganan newsletter kami

Bergabunglah dengan buletin kami untuk kiat teknologi, ulasan, ebook gratis, dan penawaran eksklusif!

Klik di sini untuk berlangganan