Обработка ошибки 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>Hi! It is an Error Page</h1>
		<h2>404 Not Found Error</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, можете вывести на ней то, что хотите. Подключите ее, как показано в уроке. А теперь убедитесь, что при клике по ссылкам вы попадаете именно на нее.