Ongeldige Parameterfout in NextJS

In vorige lesse het ons 'n 404 fout teruggestuur in die geval waar 'n roete vir die gegewe URL nie gevind is nie. By dinamiese roetes kan daar egter 'n situasie wees waar die roete wel bestaan, maar die parameterwaarde verkeerd is.

Kom ons kyk na 'n voorbeeld. Gestel ons het 'n roete van die volgende vorm: /user/:id.

Gestel ons het ook 'n objek met gebruikers:

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

Gestel ons wil die gebruiker volgens sy ID wys:

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

Dit is duidelik dat die ID in die URL nie enige iets kan wees nie, maar slegs een van die sleutels in ons objek moet wees. 'n Poging om na 'n nie-bestaande adres te gaan soos /user/6 moet daartoe lei dat 'n fout teruggestuur word. Kom ons reg ons komponent se kode op en stuur 'n foutboodskap terug:

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

Dit is egter nie genoeg nie. In hierdie geval probeer ons tog om 'n nie-bestaande bladsy te laai, en daarom moet ons die HTTP-status 404 terugstuur. Dit word gedoen met behulp van die spesiale funksie notFound, ingebou in NextJS.

Kom ons voer hierdie funksie in:

import { notFound } from 'next/navigation';

En nou sal ons dit aanroep in die geval waar die parameterwaarde ongeldig is:

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

Die volledige kode van ons komponent sal soos volg lyk:

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

Los die beskryfde probleem op in jou komponente.