Spracovanie chyby Not Found v React Router

Pri vytváraní aplikácie je potrebné venovať pozornosť aj vzniku rôznych chýb počas jej následného používania. V tejto lekcii sa naučíme pracovať s chybou 'Not Found'. Takáto chyba sa môže vyskytnúť, napríklad ak používateľ klikne na odkaz, ktorý vedie na neexistujúcu stránku.

Na začiatok otvorme našu aplikáciu, ktorú sme robili na predchádzajúcich lekciách, a nahraďme verzovanie komponentu Root. Teraz pri spustení aplikácie sa nám bude zobrazovať zoznam dvoch produktov:

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

export default Root;

Pridajme trochu štýlu do index.css:

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

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

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

A teraz klikajte na odkazy. Pretože nemáme šablóny stránok pre naše produkty, odkazy nás zavedú iba na obrazovku s chybou '404 Not Found' a s výčitkou, že sme mohli vymyslieť sami niečo krajšie a zaujímavejšie, ako to, čo nám React Router zobrazil predvolene.

Vytvorme našu vlastnú stránku, ktorá sa zobrazí v prípade vzniku chyby 404. Preto v priečinku src vytvoríme súbor error-page-404.jsx.

Vnútri React komponentu ErrorPage404 využijeme hook useRouteError na zachytanie chyby, ktorú budeme vypisovať do konzoly:

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

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

}

export default ErrorPage404;

Ďalej vo verzovaní komponentu ErrorPage404 budeme zobrazovať pár nadpisov, informujúcich o chybe a vypíšeme také vlastnosti objektu error, ako statusText a data (objekt error a jeho vlastnosti môžete tiež vidieť, ak otvoríte konzolu a začnete klikáť na naše odkazy v aplikácii).

return (
	<div>
		<h1>Ahoj! Toto je chybová stránka</h1>
		<h2>404 Chyba Not Found</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Nezabudnite určite otvoriť súbor main.jsx a pridať ešte jeden riadok importu s ErrorPage404:

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

A tiež pridajte ešte jednu vlastnosť errorElement do objektu Router - tento element sa zobrazí, keď na danej trase vznikne chyba. Hodnotou elementu chyby bude náš komponent ErrorPage404:

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

Vezmite aplikáciu, ktorú ste vytvorili v úlohách k predchádzajúcej lekcii. Pridajte na hlavnú stránku zoznam, pozostávajúci z pár odkazov, ako je to ukázané v lekcii. Nech hodnotami href odkazov sú - /students/1 a /students/2, a textom odkazov - 'Student1' a 'Student2' zodpovedajúco. Uistite sa, že pri kliknutí na odkazy sa vám objaví obrazovka s chybou, ktorú React Router zobrazuje predvolene.

A teraz vytvorte svoju vlastnú stránku s chybou 404, môžete na nej zobraziť to, čo chcete. Pripojte ju, ako je ukázané v lekcii. A teraz sa uistite, že pri kliknutí na odkazy sa dostanete práve na ňu.