Penanganan Error Not Found di React Router

Saat membuat aplikasi, perlu diperhatikan juga kemunculan berbagai error dalam proses penggunaannya nanti. Dalam pelajaran ini, kita akan belajar menangani error 'Not Found'. Error seperti ini bisa muncul, contohnya, jika pengguna mengklik tautan yang mengarah ke halaman yang tidak ada.

Pertama, mari buka aplikasi kita, yang kita buat dalam pelajaran sebelumnya, dan ganti markup dari komponen Root. Sekarang saat aplikasi dijalankan, kita akan menampilkan daftar dari dua produk:

function Root() {
	return (
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
	);
}

export default Root;

Mari tambahkan sedikit gaya ke index.css:

body {
	font-size: 18px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

a {
	text-decoration: none;
	color: blue;
}

Dan sekarang coba klik tautannya. Karena kita tidak memiliki layout halaman untuk produk kita, tautan hanya akan membawa kita ke layar dengan error '404 Not Found' dan teguran bahwa kita seharusnya bisa membuat sesuatu yang lebih cantik dan menarik, daripada yang ditampilkan React Router secara default kepada kita.

Mari buat halaman kita sendiri, yang akan ditampilkan dalam kasus munculnya error 404. Untuk melakukannya, di folder src buat file error-page-404.jsx.

Di dalam komponen React ErrorPage404 kita akan menggunakan hook useRouteError untuk menangkap error, yang akan kita tampilkan di konsol:

import { useRouteError } from 'react-router-dom';

function ErrorPage404() {
	const error = useRouteError();
	console.error(error);

}

export default ErrorPage404;

Selanjutnya, dalam markup komponen ErrorPage404 kita akan menampilkan beberapa heading, yang memberitahu tentang error dan menampilkan properti objek error seperti statusText dan data (objek error dan propertinya juga dapat Anda lihat jika Anda membuka konsol dan mulai mengklik tautan di aplikasi kita).

return (
	<div>
		<h1>Hai! Ini adalah Halaman Error</h1>
		<h2>404 Not Found Error</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Pastikan untuk membuka file main.jsx dan menambahkan satu baris impor untuk ErrorPage404:

import ErrorPage404 from './error-page-404';

Dan juga tambahkan properti lain errorElement ke objek Router - elemen ini ditampilkan ketika terjadi error pada rute ini. Nilai elemen error akan menjadi komponen kita ErrorPage404:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
	},
]);

Ambil aplikasi yang Anda buat dalam tugas di pelajaran sebelumnya. Tambahkan ke halaman utama sebuah daftar, yang terdiri dari beberapa tautan, seperti yang ditunjukkan dalam pelajaran. Biarkan nilai href dari tautan menjadi - /students/1 dan /students/2, dan teks tautannya - 'Student1' dan 'Student2' secara berurutan. Pastikan bahwa saat mengklik tautan Anda mendapatkan layar dengan error, yang ditampilkan React Router secara default.

Dan sekarang buat halaman error terpisah Anda sendiri dengan error 404, Anda dapat menampilkan di sana apapun yang Anda inginkan. Hubungkan halaman tersebut, seperti yang ditunjukkan dalam pelajaran. Dan sekarang pastikan bahwa saat mengklik tautan Anda masuk tepat ke halaman tersebut.