Gestionarea erorii Not Found în React Router

La crearea unei aplicații, este necesar să acordăm atenție și apariției diverselor erori în procesul utilizării ulterioare a acesteia. În această lecție vom învăța să lucrăm cu eroarea 'Not Found'. O astfel de eroare poate apărea, de exemplu, dacă utilizatorul dă clic pe un link care duce către o pagină inexistentă.

Pentru început, să deschidem aplicația noastră, pe care am făcut-o în lecțiile anterioare, și să înlocuim marcajul componentei Root. Acum, la lansarea aplicației, va fi afișată o listă cu două produse:

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

export default Root;

Să adăugăm câteva stiluri în index.css:

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

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

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

Și acum dați clic pe linkuri. Deoarece nu avem machete de pagini pentru produsele noastre, linkurile ne vor duce doar la ecranul cu eroarea '404 Not Found' și cu o mustrare că am fi putut veni noi înșine cu ceva mai frumos și mai interesant decât ceea ce React Router a afișat pentru noi în mod implicit.

Să creăm propria noastră pagină, care va fi afișată în cazul apariției erorii 404. Pentru aceasta, în folderul src vom crea fișierul error-page-404.jsx.

În interiorul componentei React ErrorPage404 vom folosi hook-ul useRouteError pentru a prinde eroarea, pe care o vom afîșa în consolă:

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

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

}

export default ErrorPage404;

Apoi, în marcajul componentei ErrorPage404 vom afișa câteva titluri, care informează despre eroare și vom afișa proprietăți ale obiectului error, cum ar fi statusText și data (obiectul error și proprietățile sale le puteți vedea și dacă deschideți consola și începeți să dați clic pe linkurile din aplicația noastră).

return (
	<div>
		<h1>Salut! Aceasta este o Pagină de Eroare</h1>
		<h2>Eroare 404 Not Found</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Asigurați-vă că deschideți fișierul main.jsx și adăugați încă un rând de import cu ErrorPage404:

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

Și, de asemenea, adăugați încă o proprietate errorElement în obiectul Router - acest element este afișat când apare o eroare pe această rută. Valoarea elementului de eroare va fi componenta noastră ErrorPage404:

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

Luați aplicația creată de dvs. în sarcina din lecția anterioară. Adăugați pe pagina principală o listă, formată din câteva linkuri, așa cum este arătat în lecție. Lăsați valorile href ale linkurilor să fie - /students/1 și /students/2, iar textul linkurilor - 'Student1' și 'Student2' respectiv. Asigurați-vă că atunci când dați clic pe linkuri apare ecranul cu eroarea pe care React Router o afișează în mod implicit.

Și acum creați-vă propria pagină separată cu eroarea 404, puteți afișa pe ea ce doriți. Conectați-o, așa cum este arătat în lecție. Și acum asigurați-vă că atunci când dați clic pe linkuri ajungeți exact pe ea.