การจัดการข้อผิดพลาด Not Found ใน React Router

เมื่อสร้างแอปพลิเคชัน จำเป็นต้องให้ความสนใจกับการเกิดข้อผิดพลาดต่างๆ ในระหว่างการใช้งานต่อไปด้วย ในบทเรียนนี้เราจะเรียนรู้วิธีการทำงานกับข้อผิดพลาด 'Not Found' ข้อผิดพลาดดังกล่าวอาจปรากฏขึ้น เช่น เมื่อผู้ใช้คลิกที่ ลิงก์ที่นำไปสู่หน้าที่ไม่มีอยู่จริง

เริ่มต้น เปิดแอปพลิเคชันของเราที่เราทำในบทเรียนที่ผ่านมา และเปลี่ยนการเรนเดอร์ของคอมโพเนนต์ Root ตอนนี้เมื่อเปิดแอปพลิเคชัน เราจะเห็นรายการผลิตภัณฑ์สองรายการ:

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

export default Root;

เพิ่มสไตล์เล็กน้อยใน index.css:

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

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

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

ตอนนี้ลองคลิกที่ลิงก์ เนื่องจากเราไม่มีเลย์เอาต์หน้าสำหรับ ผลิตภัณฑ์ของเรา ลิงก์จะพาเราไปที่หน้าจอแสดงข้อผิดพลาด '404 Not Found' พร้อมกับข้อความตำหนิที่บอกว่าเราน่าจะคิดอะไรที่สวยงามและน่าสนใจกว่า ที่ React Router แสดงให้เราเห็นโดยค่าเริ่มต้น

มาสร้างหน้าเว็บของเราเองที่จะแสดงเมื่อเกิดข้อผิดพลาด 404 โดยสร้างไฟล์ error-page-404.jsx ในโฟลเดอร์ src

ภายในคอมโพเนนต์ React ErrorPage404 เราจะใช้ฮุค useRouteError เพื่อดักจับข้อผิดพลาด ซึ่งเราจะแสดงในคอนโซล:

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

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

}

export default ErrorPage404;

ถัดไปในการเรนเดอร์ของคอมโพเนนต์ ErrorPage404 เราจะแสดงหัวข้อสองสามหัวข้อเพื่อแจ้งข้อผิดพลาด และจะแสดงคุณสมบัติของอ็อบเจ็กต์ error เช่น statusText และ data (คุณสามารถเห็นอ็อบเจ็กต์ error และคุณสมบัติของมันได้ด้วย หากคุณเปิดคอนโซล และเริ่มคลิกลิงก์ในแอปพลิเคชันของเรา)

return (
	<div>
		<h1>สวัสดี! นี่คือหน้ารายงานข้อผิดพลาด</h1>
		<h2>ข้อผิดพลาด 404 ไม่พบ</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

อย่าลืมเปิดไฟล์ main.jsx และเพิ่มบรรทัดนำเข้า ErrorPage404:

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

และเพิ่มคุณสมบัติ errorElement อีกหนึ่งรายการในอ็อบเจ็กต์ Router - องค์ประกอบนี้จะแสดงเมื่อเกิดข้อผิดพลาดในเส้นทางนี้ ค่าขององค์ประกอบข้อผิดพลาดจะเป็นคอมโพเนนต์ ErrorPage404 ของเรา:

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

ใช้แอปพลิเคชันที่คุณสร้างในการมอบหมายงานบทเรียนที่แล้ว เพิ่มรายการ ที่ประกอบด้วยลิงก์สองสามลิงก์ลงในหน้าแรก ตามที่แสดงในบทเรียน ให้ค่าของ href ของลิงก์เป็น - /students/1 และ /students/2 และข้อความของลิงก์คือ 'Student1' และ 'Student2' ตามลำดับ ตรวจสอบให้แน่ใจว่าคุณเห็นหน้าจอแสดงข้อผิดพลาดที่ React Router แสดงโดยค่าเริ่มต้นเมื่อคลิกลิงก์

ตอนนี้สร้างหน้าแสดงข้อผิดพลาด 404 ของคุณเอง คุณสามารถแสดงอะไรก็ได้ที่คุณต้องการ เชื่อมต่อมันตามที่แสดงในบทเรียน และตอนนี้ตรวจสอบให้แน่ใจว่าคุณเข้าสู่หน้าแสดงข้อผิดพลาดนั้น เมื่อคลิกลิงก์