Ракување на грешката Not Found во 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, можете на неа да прикажете нешто, што сакате. Поврзете ја, како што е прикажано во лекцијата. И сега проверете дали при клик на врските стигнувате токму на неа.