Этот вопрос проверяет знание механизма обработки ошибок, таких как несуществующие страницы.
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, показывая пользователю полезную информацию вместо пустой страницы.