Gestion de l'erreur Not Found dans React Router

Lors de la création d'une application, il faut prêter attention à l'apparition de diverses erreurs durant son utilisation ultérieure. Dans cette leçon, nous apprendrons à travailler avec l'erreur 'Not Found'. Une telle erreur peut survenir, par exemple, si un utilisateur clique sur un lien menant à une page inexistante.

Pour commencer, ouvrons notre application, que nous avons réalisée lors des leçons précédentes, et remplaçons le rendu du composant Root. Maintenant, lors du lancement de l'application, nous aurons une liste de deux produits affichée :

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

export default Root;

Ajoutons un peu de style dans index.css :

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

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

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

Maintenant, cliquez sur les liens. Puisque nous n'avons pas de modèles de page pour nos produits, les liens ne nous mèneront que vers un écran d'erreur '404 Not Found' et un reproche disant que nous aurions pu concevoir quelque chose de plus joli et de plus intéressant que ce que React Router nous a affiché par défaut.

Créons notre propre page, qui s'affichera en cas d'apparition de l'erreur 404. Pour cela, dans le dossier src, créons le fichier error-page-404.jsx.

À l'intérieur du composant React ErrorPage404, nous utiliserons le hook useRouteError pour intercepter l'erreur, que nous afficherons dans la console :

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

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

}

export default ErrorPage404;

Ensuite, dans le rendu du composant ErrorPage404, nous afficherons quelques titres informant de l'erreur et nous afficherons des propriétés de l'objet error, telles que statusText et data (l'objet error et ses propriétés peuvent également être vus si vous ouvrez la console et commencez à cliquer sur nos liens dans l'application).

return (
	<div>
		<h1>Salut ! C'est une Page d'Erreur</h1>
		<h2>Erreur 404 Non Trouvée</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

N'oubliez surtout pas d'ouvrir le fichier main.jsx et d'ajouter une autre ligne d'import avec ErrorPage404 :

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

Et ajoutez également une autre propriété errorElement dans l'objet Router - cet élément est affiché lorsqu'une erreur survient sur cette route. La valeur de l'élément d'erreur sera notre composant ErrorPage404 :

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

Prenez l'application que vous avez créée dans l'exercice de la leçon précédente. Ajoutez à la page d'accueil une liste, composée de quelques liens, comme montré dans la leçon. Que les valeurs de href des liens soient - /students/1 et /students/2, et le texte des liens - 'Student1' et 'Student2' respectivement. Assurez-vous qu'en cliquant sur les liens, un écran d'erreur apparaît, celui que React Router affiche par défaut.

Maintenant, créez votre propre page d'erreur 404, vous pouvez y afficher ce que vous voulez. Connectez-la, comme montré dans la leçon. Et assurez-vous maintenant qu'en cliquant sur les liens, vous atterrissez bien sur elle.