Behandlung des Not Found Fehlers in React Router

Bei der Erstellung einer Anwendung muss man auch das Auftreten verschiedener Fehler während ihrer weiteren Nutzung beachten. In dieser Lektion lernen wir, mit dem Fehler 'Not Found' zu arbeiten. Ein solcher Fehler kann auftreten, wenn ein Benutzer beispielsweise auf einen Link klickt, der zu einer nicht existierenden Seite führt.

Lassen Sie uns zunächst unsere Anwendung öffnen, die wir in den vorherigen Lektionen erstellt haben, und das Markup der Komponente Root ersetzen. Jetzt wird beim Start der Anwendung eine Liste mit zwei Produkten angezeigt:

function Root() {
	return (
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
	);
}

export default Root;

Fügen wir ein paar Stile in index.css hinzu:

body {
	font-size: 18px;
	line-height: 1.5;
}

nav {
	display: flex;
	flex-direction: column;
}

a {
	text-decoration: none;
	color: blue;
}

Klicken Sie nun auf die Links. Da wir keine Seitenlayouts für unsere Produkte haben, führen die Links uns nur zu einem Bildschirm mit dem Fehler '404 Not Found' und dem Vorwurf, dass wir uns selbst etwas Schöneres und Interessanteres hätten einfallen lassen können, als das, was React Router uns standardmäßig angezeigt hat.

Lassen Sie uns unsere eigene Seite erstellen, die im Fall eines 404-Fehlers angezeigt wird. Dazu erstellen wir in dem Ordner src die Datei error-page-404.jsx.

Innerhalb der React-Komponente ErrorPage404 verwenden wir den Hook useRouteError, um den Fehler abzufangen, den wir in der Konsole ausgeben werden:

import { useRouteError } from 'react-router-dom';

function ErrorPage404() {
	const error = useRouteError();
	console.error(error);

}

export default ErrorPage404;

Anschließend werden wir im Markup der Komponente ErrorPage404 ein paar Überschriften anzeigen, die über den Fehler informieren, und solche Eigenschaften des Objekts error ausgeben, wie statusText und data (das Objekt error und seine Eigenschaften können Sie auch sehen, wenn Sie die Konsole öffnen und anfangen, auf unsere Links in der Anwendung zu klicken).

return (
	<div>
		<h1>Hallo! Das ist eine Fehlerseite</h1>
		<h2>404 Not Found Error</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Vergessen Sie unbedingt nicht, die Datei main.jsx zu öffnen und eine weitere Zeile mit dem Import von ErrorPage404 hinzuzufügen:

import ErrorPage404 from './error-page-404';

Fügen Sie außerdem eine weitere Eigenschaft errorElement zum Objekt Router hinzu - dieses Element wird angezeigt, wenn auf dieser Route ein Fehler auftritt. Der Wert des Fehlerelements wird unsere Komponente ErrorPage404 sein:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
	},
]);

Nehmen Sie die Anwendung, die Sie in der Aufgabe aus der letzten Lektion erstellt haben. Fügen Sie auf der Hauptseite eine Liste hinzu, die aus ein paar Links besteht, wie in der Lektion gezeigt. Lassen Sie die Werte von href der Links - /students/1 und /students/2 sein, und den Text der Links - 'Student1' und 'Student2' entsprechend. Stellen Sie sicher, dass beim Klicken auf die Links der Bildschirm mit dem Fehler erscheint, den React Router standardmäßig anzeigt.

Erstellen Sie nun Ihre eigene separate Seite für den Fehler 404. Sie können darauf anzeigen, was Sie möchten. Schließen Sie sie an, wie in der Lektion gezeigt. Stellen Sie nun sicher, dass Sie beim Klicken auf die Links genau auf diese Seite gelangen.