Foutafhandeling voor Not Found in React Router

Bij het maken van een applicatie is het belangrijk aandacht te besteden aan het optreden van verschillende fouten tijdens het gebruik. In deze les leren we hoe we om kunnen gaan met de fout 'Not Found'. Deze fout kan bijvoorbeeld verschijnen als een gebruiker op een link klikt die naar een niet-bestaande pagina leidt.

Laten we eerst onze applicatie openen, die we in eerdere lessen hebben gemaakt, en de opmaak van de component Root vervangen. Nu zal bij het starten van de applicatie een lijst met twee producten worden weergegeven:

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

export default Root;

Laten we wat stijl toevoegen aan index.css:

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

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

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

En klik nu eens op de links. Omdat we geen paginalay-outs voor onze producten hebben, zullen de links ons alleen naar een scherm met de fout '404 Not Found' leiden en een verwijt dat we zelf iets mooiers en interessanters hadden kunnen bedenken dan wat React Router ons standaard heeft getoond.

Laten we onze eigen pagina maken, die wordt weergegeven in het geval van een 404-fout. Hiervoor maken we in de map src een bestand error-page-404.jsx.

Binnen de React-component ErrorPage404 gebruiken we de hook useRouteError om de fout op te vangen, die we naar de console zullen loggen:

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

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

}

export default ErrorPage404;

Vervolgens zullen we in de opmaak van de component ErrorPage404 een paar koppen weergeven die de fout melden en we zullen eigenschappen van het object error tonen, zoals statusText en data (het object error en zijn eigenschappen kunt u ook zien als u de console opent en op onze links in de applicatie begint te klikken).

return (
	<div>
		<h1>Hallo! Dit is een foutpagina</h1>
		<h2>404 Niet Gevonden Fout</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Vergeet vooral niet om het bestand main.jsx te openen en nog een importregel met ErrorPage404 toe te voegen:

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

En voeg ook nog een eigenschap errorElement toe aan het object Router - dit element wordt weergegeven wanneer er een fout optreedt op deze route. De waarde van het foutelement zal onze component ErrorPage404 zijn:

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

Neem de applicatie die je in de opdracht van de vorige les hebt gemaakt. Voeg op de hoofdpagina een lijst toe, bestaande uit een paar links, zoals getoond in de les. Laat de waarden van href van de links - /students/1 en /students/2 zijn, en de tekst van de links - 'Student1' en 'Student2' respectievelijk. Controleer of er bij het klikken op de links een scherm met de standaard React Router fout verschijnt.

En maak nu je eigen aparte pagina voor de 404-fout, je kunt erop weergeven wat je maar wilt. Sluit deze aan, zoals getoond in de les. En controleer nu of je bij het klikken op de links precies op deze pagina terechtkomt.