Netinkamo parametro klaida NextJS

Ankstesnėse pamokose grąžinome 404 klaidą tada, kai maršrutas duotam URL nebuvo rastas. Tačiau, dinaminio maršruto atveju gali būti tokia situacija, kai maršrutas egzistuoja, bet parametro reikšmė neteisinga.

Pažiūrėkime pavyzdžiu. Tarkime, turime maršrutą tokio tipo: /user/:id.

Tarkime, taip pat turime vartotojų objektą:

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

Tarkime, norime rodyti vartotoją pagal jo id:

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

Akivaizdu, kad id URL gali būti ne bet koks, o tik vienas iš mūsų objekto raktų. Bandymas kreiptis į neegzistuojantį adresą /user/6 turėtų vesti prie to, kad bus grąžinama klaida. Pataisykime mūsų komponento kodą ir išveskime klaidos tekstą:

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

To, vis dėlto, nepakanka. Juk šiuo atveju mes kreipiamės į neegzistuojantį puslapį, o tai reiškia, kad turime grąžinti HTTP statusą 404. Tai daroma naudojant specialią funkciją notFound, įmontuotą į NextJS.

Importuokime šią funkciją:

import { notFound } from 'next/navigation';

O dabar ją panaudosime tuo atveju, kai parametro reikšmė nekorektiška:

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

Pilnas mūsų komponento kodas bus tokios formos:

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

Išspręskite aprašytą problemą savo komponentuose.