Lỗi Tham số Không hợp lệ trong NextJS

Trong các bài học trước, chúng ta đã trả về lỗi 404 trong trường hợp không tìm thấy route cho URL đó. Tuy nhiên, đối với route động, có thể xảy ra tình huống route tồn tại nhưng giá trị của tham số không đúng.

Chúng ta hãy xem xét một ví dụ. Giả sử chúng ta có một route có dạng như sau: /user/:id.

Giả sử chúng ta cũng có đối tượng người dùng:

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

Giả sử chúng ta muốn hiển thị người dùng dựa trên id của họ:

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

Rõ ràng là id trong URL không thể là bất kỳ giá trị nào, mà chỉ có thể là một trong các khóa của đối tượng của chúng ta. Việc truy cập vào một địa chỉ không tồn tại /user/6 phải dẫn đến việc trả về một lỗi. Hãy sửa mã component của chúng ta và hiển thị thông báo lỗi:

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return <p>
			không tìm thấy người dùng
		</p>;
	}
}

Tuy nhiên, điều này là chưa đủ. Bởi vì trong trường hợp này, chúng ta đang truy cập vào một trang không tồn tại, do đó phải trả về mã trạng thái HTTP 404. Điều này được thực hiện bằng cách sử dụng hàm đặc biệt notFound, được tích hợp sẵn trong NextJS.

Hãy import hàm này:

import { notFound } from 'next/navigation';

Và bây giờ chúng ta sẽ gọi nó trong trường hợp giá trị tham số không chính xác:

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

Mã đầy đủ của component của chúng ta sẽ trông như sau:

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();
	}
}

Hãy giải quyết vấn đề đã mô tả trong các component của bạn.