Pengendalian Ralat Not Found dalam React Router

Apabila mencipta aplikasi, perlu diberi perhatian kepada kemunculan pelbagai ralat dalam proses penggunaannya pada masa hadapan. Dalam pelajaran ini, kita akan belajar menangani ralat 'Not Found'. Ralat sedemikian mungkin muncul, contohnya, jika pengguna mengklik pada pautan yang membawa ke halaman yang tidak wujud.

Pertama, mari buka aplikasi kita, yang kami buat dalam pelajaran lepas, dan gantikan susun atur komponen Root. Sekarang apabila aplikasi dilancarkan, kita akan mempamerkan senarai dua produk:

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

export default Root;

Mari tambah sedikit gaya dalam index.css:

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

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

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

Sekarang, cuba klik pada pautan. Memandangkan kita tidak mempunyai halaman reka bentuk untuk produk kami, pautan hanya akan membawa kita kepada skrin dengan ralat '404 Not Found' dan tuduhan bahawa kita boleh mencipta sesuatu yang lebih cantik dan menarik berbanding apa yang React Router paparkan kepada kita secara lalai.

Mari buat halaman kami sendiri, yang akan dipaparkan sekiranya ralat 404 muncul. Untuk melakukan ini, dalam folder src buat fail error-page-404.jsx.

Di dalam komponen React ErrorPage404 kita akan menggunakan hook useRouteError untuk menangkap ralat, yang akan kita paparkan dalam konsol:

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

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

}

export default ErrorPage404;

Seterusnya, dalam susun atur komponen ErrorPage404 kita akan memaparkan beberapa tajuk, memberitahu tentang ralat dan memaparkan sifat objek error seperti statusText dan data (objek error dan sifat-sifatnya anda juga boleh lihat jika anda membuka konsol dan mula mengklik pada pautan kami dalam aplikasi).

return (
	<div>
		<h1>Hi! Ini Halaman Ralat</h1>
		<h2>Ralat 404 Tidak Dijumpai</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Pastikan anda membuka fail main.jsx dan tambah satu lagi baris import dengan ErrorPage404:

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

Dan juga tambah satu lagi sifat errorElement dalam objek Router - elemen ini dipaparkan apabila ralat berlaku pada laluan ini. Nilai elemen ralat akan menjadi komponen kami ErrorPage404:

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

Ambil aplikasi, yang anda buat dalam tugasan untuk pelajaran lepas. Tambah pada halaman utama senarai, terdiri daripada beberapa pautan, seperti yang ditunjukkan dalam pelajaran. Biarkan nilai href pautan menjadi - /students/1 dan /students/2, dan teks pautan - 'Student1' dan 'Student2' masing-masing. Pastikan bahawa apabila mengklik pada pautan anda mendapat skrin dengan ralat, yang React Router paparkan secara lalai.

Dan sekarang cipta halaman berasingan anda sendiri dengan ralat 404, anda boleh paparkan di atasnya apa-apa, yang anda mahu. Sambungkannya, seperti yang ditunjukkan dalam pelajaran. Dan sekarang pastikan bahawa apabila mengklik pada pautan anda sampai tepat kepadanya.