NextJS-de rugsat berilmedik parametr ýalňyşlygy

Öňki sapaklarda, berlen URL üçin roýt tapylmadyk ýagdaýynda 404 ýalňyşlygyny ýaýdýardyk. Emma, dinamiki roýtlarda roýt bolup, ýöne parametriň bahasy nädogry bolup bilýän ýagdaý hem bolup biler.

Mysal üçin garaýaly. Bizde şeýle görnüşde bir marşrut bolsun: /user/:id.

Bizde ýene-de ulanyjylar bilen obyekt bar bolsun:

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

Onuň ID-sine görä ulanyjyny görkezmek isleýändigimizi aýdalyň:

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

Şübhesiz, URL-däki ID islendik bolup bilmez, diňe bizim obýektimiziň açarlarynyň biri bolmaly. /user/6 ýaly ýok bolan salgama ýüzlenme synanyşygy ýalňyşlygyň ýüze çykmagyna getirmeli. Komponentimiziň kodyny düzedeliň we ýalňyşlyk teksti görkezeliň:

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

Emma bu ýeterlik däl. Sebäbi bu ýagdaýda biz ýok bolan sahypa ýüzleýäris, şonuň üçin HTTP statusy 404 ýaýdylmaly. Bu NextJS-e gurnalan ýörite notFound funksiýasy arkaly amala aşyrylýar.

Geliň şu funksiýany import edeliň:

import { notFound } from 'next/navigation';

Indi bolsa, parametriň bahasy dogry däl ýagdaýynda ony çagyralyň:

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

Komponentimiziň doly kody aşakdaky görnüşde bolar:

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

Öz komponentleriňizde beýan edilen meseleleri çözuň.