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

← →
↑