Обработка на грешката 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, можете да покажете на нея това, което искате. Свържете я, както е показано в урока. И сега се уверете, че при кликване по връзките попадате точно на нея.