Gestione dell'errore Not Found in React Router

Quando si crea un'applicazione, è necessario prestare attenzione anche alla comparsa di vari errori durante il suo utilizzo successivo. In questa lezione impareremo a lavorare con l'errore 'Not Found'. Questo errore può apparire, ad esempio, se un utente fa clic su un link che porta a una pagina inesistente.

Per iniziare, apriamo la nostra applicazione, che abbiamo creato nelle lezioni precedenti, e sostituiamo il markup del componente Root. Ora all'avvio dell'applicazione verrà visualizzato un elenco di due prodotti:

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

export default Root;

Aggiungiamo un po' di stili in index.css:

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

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

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

E ora fai clic sui link. Dato che non abbiamo i layout delle pagine per i nostri prodotti, i link ci porteranno solo a una schermata con l'errore '404 Not Found' e un rimprovero per non aver pensato a qualcosa di più bello e interessante di ciò che React Router ci ha mostrato per impostazione predefinita.

Creiamo la nostra pagina personalizzata, che verrà visualizzata in caso di errore 404. Per farlo, nella cartella src creiamo il file error-page-404.jsx.

All'interno del componente React ErrorPage404 utilizzeremo l'hook useRouteError per catturare l'errore, che stamperemo nella console:

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

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

}

export default ErrorPage404;

Successivamente, nel markup del componente ErrorPage404 visualizzeremo un paio di intestazioni che segnalano l'errore e mostreremo proprietà dell'oggetto error come statusText e data (l'oggetto error e le sue proprietà possono essere viste anche aprendo la console e iniziando a cliccare sui nostri link nell'applicazione).

return (
	<div>
		<h1>Ciao! Questa è una Pagina di Errore</h1>
		<h2>Errore 404 Not Found</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Assicuratevi di non dimenticare di aprire il file main.jsx e aggiungere un'altra riga di import per ErrorPage404:

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

E aggiungete anche un'altra proprietà errorElement nell'oggetto Router - questo elemento viene visualizzato quando si verifica un errore su questa route. Il valore dell'elemento di errore sarà il nostro componente ErrorPage404:

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

Prendi l'applicazione che hai creato nel compito della lezione precedente. Aggiungi alla pagina principale un elenco composto da un paio di link, come mostrato nella lezione. Lascia che i valori href dei link siano - /students/1 e /students/2, e il testo dei link - 'Student1' e 'Student2' rispettivamente. Assicurati che facendo clic sui link appare una schermata con l'errore che React Router visualizza per impostazione predefinita.

E ora crea la tua pagina separata con l'errore 404, puoi visualizzare su di essa ciò che desideri. Collegala come mostrato nella lezione. E ora assicurati che facendo clic sui link si arrivi proprio su di essa.