Как React Router DOM обрабатывает неизвестные или некорректные URL?
Этот вопрос проверяет знание механизма обработки ошибок, таких как несуществующие страницы.
Короткий ответ
React Router DOM перенаправляет некорректные URL на компонент обработки ошибок, который настраивается с помощью специального маршрута (path="*" или errorElement).
Длинный ответ
Использование маршрута-заглушки path="*":
Добавьте маршрут для неизвестных URL:
import { Routes, Route } from 'react-router-dom';
const App = () => (
<Routes>
<Route path="/" element={<Home />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
Использование errorElement:
В createBrowserRouter можно настроить глобальный обработчик ошибок:
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
errorElement: <NotFound />,
},
{
path: "/about",
element: <About />,
},
]);
const App = () => <RouterProvider router={router} />;
Отображение страницы 404:
Создайте компонент для ошибки:
const NotFound = () => <h1>Страница не найдена</h1>;
Почему это важно:
Обработка некорректных маршрутов улучшает UX, показывая пользователю полезную информацию вместо пустой страницы.