Rukovanje greškom Not Found u React Router

Prilikom kreiranja aplikacije potrebno je obratiti pažnju i na pojavu različitih grešaka u procesu njene dalje upotrebe. U ovoj lekciji naučićemo kako da radimo sa greškom 'Not Found'. Takva greška može da iskoči, na primer, ako korisnik klikne na link koji vodi na nepostojeću stranicu.

Za početak otvorimo našu aplikaciju, koju smo pravili na prethodnim lekcijama, i zamenimo izgled komponente Root. Sada će se prilikom pokretanja aplikacije prikazivati lista od dva proizvoda:

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

export default Root;

Dodajmo malo stila u index.css:

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

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

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

A sada klikajte po linkovima. Pošto nemamo izglede stranica za naše proizvode, linkovi će nas odvesti samo na ekran sa greškom '404 Not Found' i prekorem što smo mogli sami da smislimo nešto lepše i zanimljivije, nego što je React Router prikazao podrazumevano.

Napravimo našu sopstvenu stranicu, koja će se prikazivati u slučaju pojave greške 404. Za to u direktorijumu src kreirajmo fajl error-page-404.jsx.

Unutar React komponente ErrorPage404 koristićemo kuk useRouteError za hvatanje greške, koju ćemo ispisivati u konzolu:

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

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

}

export default ErrorPage404;

Zatim u izgledu komponente ErrorPage404 prikazaćemo par naslova, koji obaveštavaju o grešci i ispisaćemo takva svojstva objekta error, kao što su statusText i data (objekat error i njegova svojstva takođe možete videti, ako otvorite konzolu i počnete da klikćete po našim linkovima u aplikaciji).

return (
	<div>
		<h1>Zdravo! Ovo je stranica sa greškom</h1>
		<h2>404 Greška - Stranica nije pronađena</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Obavezno ne zaboravite da otvorite fajl main.jsx i dodate još jednu liniju uvoza sa ErrorPage404:

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

A takođe dodajte još jedno svojstvo errorElement u objekat Router - ovaj element se prikazuje, kada na datoj ruti nastane greška. Vrednost elementa greške će biti naša komponenta ErrorPage404:

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

Uzmite aplikaciju koju ste kreirali u zadatku za prethodnu lekciju. Dodajte na početnu stranicu listu, koja se sastoji od par linkova, kao što je pokazano u lekciji. Neka vrednosti href linkova budu - /students/1 i /students/2, a tekst linkova - 'Student1' i 'Student2' redom. Uverite se da prilikom klika na linkove vam se pojavljuje ekran sa greškom, koju React Router prikazuje podrazumevano.

A sada kreirajte svoju posebnu stranicu sa greškom 404, možete ispisati na njoj ono, što želite. Povežite je, kao što je pokazano u lekciji. A sada uverite se da prilikom klika na linkove dolazite upravo na nju.