Obsługa błędu Not Found w React Router

Tworząc aplikację, należy zwrócić uwagę również na pojawianie się różnych błędów w trakcie jej późniejszego użytkowania. W tej lekcji nauczymy się pracować z błędem 'Not Found'. Taki błąd może się pojawić, na przykład, jeśli użytkownik kliknie w link prowadzący do nieistniejącej strony.

Na początek otwórzmy naszą aplikację, którą tworzyliśmy na poprzednich lekcjach, i zamieńmy wersję komponentu Root. Teraz po uruchomieniu aplikacji będzie się nam wyświetlać lista dwóch produktów:

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

export default Root;

Dodajmy trochę stylów 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 poklikaj w linki. Ponieważ nie mamy szablonów stron dla naszych produktów, linki zaprowadzą nas tylko do ekranu z błędem '404 Not Found' i wyrzutem, że moglibyśmy wymyślić coś ładniejszego i ciekawszego, niż to, co React Router wyświetlił nam domyślnie.

Stwórzmy naszą własną stronę, która będzie wyświetlana w przypadku pojawienia się błędu 404. W tym celu w folderze src utwórzmy plik error-page-404.jsx.

Wewnątrz komponentu React ErrorPage404 wykorzystamy hook useRouteError do wychwycenia błędu, który będziemy wypisywać w konsoli:

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

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

}

export default ErrorPage404;

Następnie w wersji komponentu ErrorPage404 będziemy wyświetlać parę nagłówków, informujących o błędzie i wypiszemy takie właściwości obiektu error, jak statusText i data (obiekt error i jego właściwości możesz również zobaczyć, jeśli otworzysz konsolę i zaczniesz klikać w nasze linki w aplikacji).

return (
	<div>
		<h1>Cześć! To jest Strona Błędu</h1>
		<h2>404 Błąd Nie Znaleziono</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Koniecznie nie zapomnij otworzyć pliku main.jsx i dodać jeszcze jeden wiersz importu z ErrorPage404:

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

A także dodaj jeszcze jedną właściwość errorElement do obiektu Router - ten element jest wyświetlany, gdy na danej ścieżce wystąpi błąd. Wartością elementu błędu będzie nasz komponent ErrorPage404:

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

Weź aplikację utworzoną przez Ciebie w zadaniu do poprzedniej lekcji. Dodaj na stronę główną listę, składającą się z pary linków, jak pokazano w lekcji. Niech wartościami href linków będą - /students/1 i /students/2, a tekstem linków - 'Student1' i 'Student2' odpowiednio. Upewnij się, że po kliknięciu w linki pojawia się ekran z błędem, który React Router wyświetla domyślnie.

A teraz utwórz swoją własną stronę z błędem 404, możesz wyświetlić na niej to, co chcesz. Podłącz ją, jak pokazano w lekcji. A teraz upewnij się, że po kliknięciu w linki trafiasz właśnie na nią.