Ralat Parameter Tidak Sah dalam NextJS

Dalam pelajaran sebelumnya, kami memberikan ralat 404 dalam kes di mana laluan untuk URL tersebut tidak ditemui. Walau bagaimanapun, dalam kes laluan dinamik, mungkin terdapat situasi di mana laluan wujud, tetapi nilai parameternya tidak betul.

Mari kita lihat contoh. Katakan kita mempunyai laluan seperti berikut: /user/:id.

Katakan juga kita mempunyai objek pengguna:

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

Katakan kita mahu menunjukkan pengguna berdasarkan ID mereka:

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

Jelas sekali, ID dalam URL tidak boleh sebarang nilai, tetapi hanya salah satu kunci dalam objek kita. Percubaan untuk mengakses alamat yang tidak wujud /user/6 sepatutnya membawa kepada penghasilan ralat. Mari kita betulkan kod komponen kita dan paparkan teks ralat:

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

Walau bagaimanapun, ini masih tidak mencukupi. Ini kerana dalam kes ini kita mengakses halaman yang tidak wujud, oleh itu kita harus mengembalikan status HTTP 404. Ini dilakukan menggunakan fungsi khas notFound, yang terbina dalam NextJS.

Mari import fungsi ini:

import { notFound } from 'next/navigation';

Dan sekarang kita akan memanggilnya dalam kes di mana nilai parameter tidak betul:

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

Kod penuh komponen kita akan kelihatan seperti berikut:

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

Selesaikan masalah yang diterangkan dalam komponen anda.