Անթույլատրելի պարամետրի սխալ NextJS-ում

Նախորդ դասերում մենք տալիս էինք 404 սխալ այն դեպքում, երբ տվյալ URL-ի համար ռուտ չէր գտնվել: Սակայն, դինամիկ ռուտի դեպքում կարող է լինել այնպիսի իրավիճակ, երբ ռուտը գոյություն ունի, բայց պարամետրի արժեքը սխալ է:

Դիտարկենք օրինակով: Ենթադրենք մենք ունենք հետևյալ տեսքի ճանապարհ. /user/:id.

Ենթադրենք նաև, որ մենք ունենք օբյեկտ օգտատերերով.

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

Ենթադրենք, մենք ցանկանում ենք ցույց տալ օգտատիրոջը նրա id-ի համար.

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

Ակնհայտ է, որ URL-ի id-ն կարող է լինել ոչ ցանկացած, այլ միայն մեր օբյեկտի բանալիներից մեկը: Գոյություն չունեցող հասցեին /user/6 դիմելը պետք է հանգեցնի նրան, որ կտրվի սխալ: Եկեք ուղղենք մեր կոմպոնենտի կոդը և արտածենք սխալի տեքստը.

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return <p>
			user not found
		</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();
	}
}

Լուծեք նկարագրված խնդիրը ձեր կոմպոնենտներում: