Руковање грешком "Није пронађено" у React Router

Приликом креирања апликације потребно је обратити пажњу и на појаву разних грешака током њеног даљег коришћења. У овој лекцији ћемо научити како да радимо са грешком 'Not Found'. Такав грешка се може појавити, на пример, ако корисник кликне на линк који води на непостојећу страницу.

За почетк, хајде да отворимо нашу апликацију, коју смо радили у претходним лекцијама, и заменимо верставање компоненте Root. Сада при покретању апликације ће се приказивати листа од два производа:

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

export default Root;

Додајмо мало стилова у index.css:

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

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

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

А сада кликајте по линковима. Пошто немамо шаблоне страница за наше производе, линкови ће нас одвести само на екран са грешком '404 Not Found' и приговором да смо могли сами да смислимо нешто лепше и интересантније од онога што нам је React Router подразумевано приказао.

Хајде да направимо нашу сопствену страницу, која ће се приказивати у случају појаве грешке 404. За то у фолдеру src креирајмо фајлик error-page-404.jsx.

Унутар React компоненте ErrorPage404 искористићемо кукац useRouteError за хватање грешке, коју ћемо исписати у конзолу:

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

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

}

export default ErrorPage404;

Затим у верставању компоненте ErrorPage404 приказиваћемо пар наслова, који обавештавају о грешци и приказаћемо таква својства објекта error, као што су statusText и data (објекат error и његова својства такође можете видети ако отворите конзолу и почнете да клићете по нашим линковима у апликацији).

return (
	<div>
		<h1>Здраво! Ово је страница за грешке</h1>
		<h2>Грешка 404 Није пронађено</h2>
		<p>
			<i>{error.statusText}</i>
		</p>
		<p>
			<i>{error.data}</i>
		</p>
	</div>
);

Обавезно не заборавите да отворите фајл main.jsx и додате још једну линију увоза за ErrorPage404:

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

Такође додајте још једно својство errorElement у објекат Router - овај елемент се приказује, када на датој рути настане грешка. Вредност елемента грешке ће бити наша компонента ErrorPage404:

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

Узмите апликацију коју сте креирали у задатку за претходну лекцију. Додајте на почетну страницу списак, који се састоји од пар линкова, као што је приказано у лекцији. Нека вредности href линкова буду - /students/1 и /students/2, а текст линкова - 'Student1' и 'Student2' редом. Уверите се да при клику на линкове вам се појављује екран са грешком, коју React Router подразумевано приказује.

А сада креирајте вашу посебну страницу са грешком 404, можете на њој приказати оно, што желите. Повежите је, као што је приказано у лекцији. А сада се уверите да при клику на линкове долазите управо на њу.