Хатои параметри нодуруст дар NextJS

Дар дарсҳои гузашта мо хатои 404-ро дар он ҳолат медодем, ки роут барои ин URL ёфт нашуд. Аммо, дар ҳолати роути динамикӣ метавонад чунин ҳолате рӯй диҳад, ки роут вуҷуд дорад, вале қимати параметр нодуруст аст.

Биёед дар мисол бубинем. Фарз кунем, ки мо роути зеринро дорем: /user/:id.

Фарз кунем, ки мо инчунин объекте бо корбарон дорем:

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

Фарз кунем, ки мо мехоҳем корбарро бо истифода аз ID-и он нишон диҳем:

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

Ошкорост, ки ID дар URL метавонад ҳар гуна набошад, балки танҳо яке аз калидҳои объекти мо бошад. Кӯшиши муроҷиат кардан ба суроғаи мавҷуднабуда /user/6 бояд ба ин овардад, ки хато чоп шавад. Биёед коди компоненти худро ислоҳ кунем ва матни хаторо чоп кунем:

export default function User({ params }) {
	if (users[params.id]) {
		return <p>
			{ users[params.id] }
		</p>;
	} else {
		return <p>
			корбар ёфт нашуд
		</p>;
	}
}

Ин, ҳамчунон, кофӣ нест. Зеро дар ин ҳолат мо ба саҳифаи мавҷуднабуда муроҷиат мекунем, ва бинобар ин бояд статуси HTTP-и 404-ро дода шавад. Ин бо ёрии функсияи махсуси notFound анҷом дода мешавад, ки дар NextJS сохта шудааст.

Биёед ин функсияро ворид кунем:

import { notFound } from 'next/navigation';

Ва ҳоло онро дар он ҳолат даъват мекунем, ки қимати параметр дуруст нест:

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

Коди пурраи компоненти мо ба тарзи зерин хоҳад буд:

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

Масъалаи тавсифшударо дар компонентҳои худ ҳал кунед.