Ongeldige parameterfout in NextJS

In eerdere lessen hebben we een 404 fout teruggegeven in het geval dat de route voor een bepaalde URL niet werd gevonden. Echter, bij een dynamische route kan zich een situatie voordoen waarin de route wel bestaat, maar de parameterwaarde onjuist is.

Laten we een voorbeeld bekijken. Stel we hebben een route van het volgende type: /user/:id.

Stel we hebben ook een object met users:

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

Stel we willen de user tonen op basis van zijn id:

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

Het is duidelijk dat de id in de URL niet willekeurig kan zijn, maar alleen een van de sleutels van ons object. Een poging om naar een niet-bestaand adres te gaan /user/6 moet resulteren in een fout. Laten we de code van onze component corrigeren en een foutmelding tonen:

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

Dit is echter niet voldoende. Immers, in dit geval proberen we een niet-bestaande pagina te bereiken, en moeten we dus een HTTP-status 404 teruggeven. Dit wordt gedaan met behulp van een speciale functie notFound, ingebouwd in NextJS.

Laten we deze functie importeren:

import { notFound } from 'next/navigation';

En laten we deze aanroepen in het geval dat de parameterwaarde ongeldig is:

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

De volledige code van onze component ziet er als volgt uit:

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 het beschreven probleem op in je componenten.