Not Found -virheen käsittely React Routerissa

Sovellusta luodessa on kiinnitettävä huomiota myös erilaisten virheiden ilmestymiseen sen myöhemmän käytön aikana. Tässä oppitunnissa opimme työskentelemään 'Not Found' -virheen kanssa. Tällainen virhe voi ilmaantua esimerkiksi, jos käyttäjä napsauttaa linkkiä, joka johtaa olematomalle sivulle.

Aluksi avataan sovelluksemme, jota teimme edellisillä tunneilla, ja korvataan Root -komponentin merkintäkieli. Nyt sovelluksen käynnistyessä meillä näytetään lista kahdesta tuotteesta:

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

export default Root;

Lisätään hieman tyylejä tiedostoon index.css:

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

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

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

Ja nyt napsauta linkkejä. Koska meillä ei ole sivumalleja tuotteillemme, linkit johtavat meidät vain '404 Not Found' -virhernäytölle ja nuhteluun siitä, että olisimme voineet keksiä itse jotain kauniimpaa ja mielenkiintoisempaa kuin mitä React Router näytti meille oletusarvoisesti.

Tehdään oma pieni sivu, jota näytetään tapauksessa virheen 404 ilmaantuminen. Tätä varten luodaan kansioon src tiedosto error-page-404.jsx.

React-komponentin ErrorPage404 sisällä hyödynnämme useRouteError -hookkia virheen sieppaamiseen, jonka tulostamme konsoliin:

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

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

}

export default ErrorPage404;

Seuraavaksi ErrorPage404 -komponentin merkintäkielessä näytämme pari otsikkoa, joissa ilmoitetaan virheesta ja tulostamme error -olion sellaiset ominaisuudet kuin statusText ja data (error -olio ja sen ominaisuudet voit myös nähdä, jos avaat konsolin ja alat napsauttamaan linkkejämme sovelluksessa).

return (
	<div>
		<h1>Hei! Tämä on virhesivu</h1>
		<h2>404 Not Found -virhe</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Muista avata tiedosto main.jsx ja lisätä vielä yksi import-rivi ErrorPage404:lle:

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

Ja lisää myös yksi ominaisuus errorElement Router -olioon - tämä elementti näytetään, kun tällä reitillä ilmenee virhe. Virheelementin arvoksi tulee komponenttimme ErrorPage404:

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

Ota edellisen tunnin tehtävässä luomasi sovellus. Lisää kotisivulle lista, joka koostuu parista linkistä, kuten oppitunnissa on esitetty. Olkoon linkkien href -arvoja - /students/1 ja /students/2, ja linkkien tekstit - 'Student1' ja 'Student2' vastaavasti. Varmista, että linkkejä napsautettaessa sinulle ilmestyy virhenäyttö, jonka React Router näyttää oletusarvoisesti.

Ja nyt luo oma erillinen sivusi virheelle 404, voit näyttää siinä mitä haluat. Yhdistä se, kuten oppitunnissa on esitetty. Ja nyt varmista, että linkkejä napsautettaessa pääset juuri sille.