Этот вопрос проверяет знание механизмов обработки ошибок в React Router
Обработка ошибок в React Router осуществляется через свойство errorElement для маршрута или через глобальный обработчик ошибок на уровне роутера. Ошибки могут быть отображены с помощью компонента ошибки.
Использование свойства errorElement:
Добавьте errorElement для отображения страницы ошибок при возникновении проблем.
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
errorElement: <NotFound />,
},
{
path: "/about",
element: <About />,
},
]);
const App = () => <RouterProvider router={router} />;Обработка ошибок загрузчиков (loader):
Если в загрузчике данных возникает ошибка, errorElement отображается автоматически.
const loaderWithError = async () => {
throw new Error("Ошибка загрузки данных");
};
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
loader: loaderWithError,
errorElement: <ErrorPage />,
},
]);Преимущества:
Централизованная обработка ошибок.
Улучшение UX за счет отображения понятных сообщений вместо пустых страниц.