Nederīga parametra kļūda NextJS

Iepriekšējās nodarbībās mēs atgriezām 404 kļūdu gadījumā, kad šim URL netika atrasts neviens maršruts. Tomēr dinamiska maršruta gadījumā var rasties situācija, kad maršruts pastāv, bet parametra vērtība ir nepareiza.

Apskatīsim piemēru. Pieņemsim, ka mums ir šāda veida maršruts: /user/:id.

Pieņemsim arī, ka mums ir lietotāju objekts:

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

Pieņemsim, ka mēs vēlamies rādīt lietotāju pēc viņa id:

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

Acīmredzami, ka id URL nevar būt jebkurš, bet tikai viens no mūsu objekta atslēgām. Mēģinājums piekļūt ar neesošu adresi /user/6 jānoved pie kļūdas. Izlabosim mūsu komponenta kodu un izvadīsim kļūdas tekstu:

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return <p>
			lietotājs netika atrasts
		</p>;
	}
}

Tomēr ar to nepietiek. Galu galā šajā gadījumā mēs mēģinām piekļūt neesošai lapai, un tāpēc ir jāatgriež HTTP statuss 404. Tas tiek darīts, izmantojot īpašu funkciju notFound, kas ir iebūvēta NextJS.

Importēsim šo funkciju:

import { notFound } from 'next/navigation';

Un tagad izsauksim to gadījumā, ja parametra vērtība ir nekorekta:

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

Pilns mūsu komponenta kods izskatīsies šādi:

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

Atrisiniet aprakstīto problēmu savos komponentos.