ข้อผิดพลาดพารามิเตอร์ไม่ถูกต้องใน NextJS

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

ลองดูตัวอย่าง สมมติว่าเรามีเส้นทางรูปแบบต่อไปนี้: /user/:id

และสมมติว่าเรามี อ็อบเจ็กต์เก็บผู้ใช้:

let users = {
	1: 'user1',
	2: 'user2',
	3: 'user3',
	4: 'user4',
	5: 'user5',
};

สมมติว่าเราต้องการแสดงข้อมูลผู้ใช้ ตามไอดีของเขา:

export default function User({ params }) {
	return <p>
		{ users[params.id] }
	</p>;
}

เห็นได้ชัดว่าไอดีใน URL ไม่สามารถเป็น อะไรก็ได้ แต่ต้องเป็นหนึ่งในคีย์ ของอ็อบเจ็กต์ของเรา การพยายามเข้าถึง ที่อยู่ที่ไม่存在的 /user/6 ควรนำไปสู่ การส่งคืนข้อผิดพลาด มาแก้ไข โค้ดคอมโพเนนต์ของเราและแสดง ข้อความข้อผิดพลาด:

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return <p>
			ไม่พบผู้ใช้
		</p>;
	}
}

อย่างไรก็ตาม นี่ยังไม่เพียงพอ เพราะในกรณีนี้เรากำลังเข้าถึง หน้าที่ไม่มีอยู่จริง ดังนั้นเราควรส่งกลับสถานะ HTTP 404 สิ่งนี้ทำได้โดยใช้ ฟังก์ชันพิเศษ notFound ที่มีอยู่แล้วใน NextJS

มาเริ่มต้นด้วยการนำเข้าฟังก์ชันนี้:

import { notFound } from 'next/navigation';

และตอนนี้เราจะเรียกใช้มันใน กรณีที่ค่าพารามิเตอร์ ไม่ถูกต้อง:

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return notFound();
	}
}

โค้ดเต็มของคอมโพเนนต์ของเราจะ มีลักษณะดังนี้:

import { notFound } from 'next/navigation';

let users = {
	1: 'user1',
	2: 'user2',
	3: 'user3',
	4: 'user4',
	5: 'user5',
};

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return notFound();
	}
}

แก้ไขปัญหาที่อธิบายไว้ ในคอมโพเนนต์ของคุณ