เส้นทางที่ไม่มีเส้นทางใน React Router

ในบทเรียนนี้ เราจะพิจารณาคุณสมบัติที่เป็นประโยชน์อีกอย่างหนึ่งของเส้นทางที่ไม่มีเส้นทาง

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

แต่ถ้า errorElement ของเราเหมือนกันสำหรับทุกเส้นทางล่ะ? แน่นอน คุณสามารถใส่ค่าเดียวกันซ้ำๆ ในแต่ละเส้นทาง หรือคุณสามารถใช้เส้นทางที่ไม่มีเส้นทาง, ห่อหุ้มเส้นทางลูกที่เราสนใจไว้ข้างในมันได้ แล้วในกรณีที่เกิดข้อผิดพลาดในเส้นทางใดเส้นทางหนึ่ง เส้นทางที่ไม่มีเส้นทางของเราจะดักจับและแสดง errorElement ของมันเอง

เข้าไปในไฟล์ main.jsx และห่อหุ้มเส้นทางลูกทั้งหมดของเราไว้ในเส้นทางที่ไม่มีเส้นทาง, ทำให้พวกมันเป็นลูกของมัน (ในทางกลับกัน เส้นทางนี้จะกลายเป็นลูกของรูท) อย่าลืมเพิ่มคุณสมบัติ errorElement ให้กับมันด้วย:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		loader: rootLoader,
		action: rootAction,
		children: [
			{
				errorElement: <ErrorPage404 />,
				children: [
					{ index: true, element: <Index /> },
					{
						path: 'products/:productId',
						element: <Product />,
						loader: productLoader,
					},
					{
						path: 'products/:productId/edit',
						element: <EditProduct />,
						loader: editProductLoader,
						action: editAction,
					},
					{
						path: 'products/:productId/delete',
						action: deleteAction,
					},
				],
			},
		],
	},
]);

ตอนนี้จะตรวจสอบการทำงานของโค้ดนี้ได้อย่างไร? คุณสามารถเพิ่มบรรทัดที่โยนข้อผิดพลาด (อย่าลืมลบมันออกภายหลัง เมื่อคุณทดสอบเสร็จแล้ว) ตัวอย่างเช่น ลองเพิ่มมันเป็นบรรทัดแรกในฟังก์ชัน action สำหรับเส้นทางลบสินค้า, เมื่อพยายามลบสินค้า เราจะเห็นข้อผิดพลาด:

export async function action({ params }) {
	throw new Error('error');
	await deleteProduct(params.productId);
	return redirect('/');
}

ตอนนี้ ลองลบสินค้าบางอย่างดู

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