Чем полезен useRouteError, и в каких ситуациях его использовать?
Этот вопрос проверяет знание механизма обработки ошибок в маршрутах
Короткий ответ
useRouteError позволяет получить ошибку, возникшую в loader или action, и отобразить её пользователю. Он используется в errorElement маршрутов для показа кастомных страниц ошибок.
Длинный ответ
Как работает useRouteError:
Ошибка, выброшенная в loader или action, автоматически передается в errorElement маршрута.
В errorElement хук useRouteError предоставляет объект ошибки.
Пример использования:
Настройте маршрут с обработкой ошибок:
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
loader: async () => {
throw new Error("Ошибка загрузки данных");
},
errorElement: <ErrorPage />,
},
]);Создайте компонент для обработки ошибок:
import { useRouteError } from 'react-router-dom';
const ErrorPage = () => {
const error = useRouteError();
return (
<div>
<h1>Ошибка!</h1>
<p>{error.message}</p>
</div>
);
};
Обработка ошибок действий:
Аналогично loader, ошибки из action также обрабатываются через errorElement.
Преимущества:
- Централизованная обработка ошибок.
- Возможность предоставлять пользователю понятные сообщения об ошибках.
Итог: useRouteError улучшает пользовательский опыт, позволяя показать детальную информацию при ошибках.