Zpracování chyby Not Found v React Router

Při vytváření aplikace je třeba věnovat pozornost také výskytu různých chyb v průběhu jejího dalšího používání. V této lekci se naučíme pracovat s chybou 'Not Found'. K takové chybě může dojít, kupříkladu pokud uživatel klikne na odkaz vedoucí na neexistující stránku.

Pro začátek otevřeme naši aplikaci, kterou jsme vytvářeli v předchozích lekcích, a nahradíme vzhled komponenty Root. Nyní při spuštění aplikace se nám bude zobrazovat seznam dvou produktů:

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

export default Root;

Přidejme několik stylů do index.css:

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

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

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

A nyní klikněte na odkazy. Protože nemáme šablony stránek pro naše produkty, odkazy nás zavedou pouze na obrazovku s chybou '404 Not Found' a s výčitkou, že jsme si mohli vymyslet sami něco hezčího a zajímavějšího, než to, co React Router zobrazil ve výchozím nastavení.

Vytvořme naši vlastní stránku, která se bude zobrazovat v případě výskytu chyby 404. K tomu ve složce src vytvoříme soubor error-page-404.jsx.

Uvnitř React komponenty ErrorPage404 použijeme hook useRouteError pro zachycení chyby, kterou budeme vypisovat do konzole:

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

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

}

export default ErrorPage404;

Dále ve vzhledu komponenty ErrorPage404 budeme zobrazovat pár nadpisů, informujících o chybě a vypíšeme takové vlastnosti objektu error, jako statusText a data (objekt error a jeho vlastnosti můžete také vidět, pokud otevřete konzoli a začnete klikat na naše odkazy v aplikaci).

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

Nezapomeňte určitě otevřít soubor main.jsx a přidat ještě jeden řádek importu s ErrorPage404:

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

A také přidejte ještě jednu vlastnost errorElement do objektu Router - tento prvek se zobrazuje, když na dané trase dojde k chybě. Hodnotou prvku chyby bude naše komponenta ErrorPage404:

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

Vezměte aplikaci, kterou jste vytvořili v úkolu k minulé lekci. Přidejte na hlavní stránku seznam sestávající z pár odkazů, jak je znázorněno v lekci. Nechť hodnotami href odkazů jsou - /students/1 a /students/2, a textem odkazů - 'Student1' a 'Student2' odpovídajícím způsobem. Ujistěte se, že při kliknutí na odkazy se vám objeví obrazovka s chybou, kterou React Router vypisuje ve výchozím nastavení.

A nyní vytvořte svou vlastní samostatnou stránku s chybou 404, můžete na ní vypsat to, co chcete. Připojte ji, jak je znázorněno v lekci. A nyní se ujistěte, že při kliknutí na odkazy se dostanete právě na ni.