Обработка ошибки 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, можете вывести на ней то, что хотите. Подключите ее, как показано в уроке. А теперь убедитесь, что при клике по ссылкам вы попадаете именно на нее.