Ungültiger Parameterfehler in NextJS

In vorherigen Lektionen haben wir einen 404-Fehler zurückgegeben, wenn die Route für die gegebene URL nicht gefunden wurde. Es kann jedoch bei einer dynamischen Route eine Situation geben, in der die Route existiert, aber der Parameterwert falsch ist.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben eine Route vom Typ: /user/:id.

Nehmen wir außerdem an, wir haben ein Objekt mit Benutzern:

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

Nehmen wir an, wir möchten den Benutzer anhand seiner ID anzeigen:

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

Offensichtlich kann die ID in der URL nicht beliebig sein, sondern nur einer der Schlüssel unseres Objekts. Der Versuch, auf eine nicht existierende Adresse /user/6 zuzugreifen, sollte dazu führen, dass ein Fehler ausgegeben wird. Lassen Sie uns den Code unserer Komponente korrigieren und einen Fehlertext ausgeben:

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

Das reicht jedoch nicht aus. Schließlich greifen wir in diesem Fall auf eine nicht existierende Seite zu, und müssen daher den HTTP-Status 404 zurückgeben. Dies geschieht mit Hilfe der speziellen Funktion notFound, die in NextJS integriert ist.

Importieren wir diese Funktion:

import { notFound } from 'next/navigation';

Und jetzt rufen wir sie auf, wenn der Parameterwert ungültig ist:

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

Der vollständige Code unserer Komponente wird wie folgt aussehen:

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

Lösen Sie das beschriebene Problem in Ihren Komponenten.