Hitilafu ya Kigezo kisichokubalika katika NextJS

Katika masomo yaliyopita tulitoa 404 hitilafu kwenye kesi ambayo njia ya URL hiyo haukupatikana. Hata hivyo, kwenye kesi ya njia inayobadilika kunaweza kuwa hali ambayo njia ipo, lakini thamani ya kigezo sio sahihi.

Tuangalie kwa mfano. Tuchukulie tuna njia ya aina ifuatayo: /user/:id.

Tuchukulie pia tuna kitu cha watumiaji:

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

Tuchukulie tunataka kuonyesha mtumiaji kwa kutumia kitambulisho chake:

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

Ni wazi kuwa kitambulisho kwenye URL kiwezekani sio chochote, bali ni moja wapo ya funguo za kitu chetu. Jaribio la kufikia anwani isiyopo /user/6 inapaswa kusababisha hitilafu itolewe. Warekebisha msimbo wa kijenzi chetu na uonyeshe maandishi ya hitilafu:

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

Hii, hata hivyo, haitoshi. Maana kwenye kesi hii tunafikia ukurasa usiopo, na kwa hivyo tunapaswa kutoa hali ya HTTP 404. Hii inafanywa kwa kutumia kitendo maalum notFound, kilichojengwa ndani ya NextJS.

Wacha tuingize kitendo hiki:

import { notFound } from 'next/navigation';

Sasa tutaiita wakati thamani ya kigezo haifai:

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

Msimbo kamili wa kijenzi chetu utaonekana kama ifuatavyo:

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

Tatua tatizo lililoelezewa katika vijenzi vyako.