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

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

Рейтинг:
3
Сложность:
5

Навыки

React Router

Ключевые слова

#error

#path

Подпишись на React Developer в телеграм

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Как React Router DOM обрабатывает неизвестные или некорректные URL?

Этот вопрос проверяет знание механизма обработки ошибок, таких как несуществующие страницы.

Короткий ответ

Длинный ответ

Использование маршрута-заглушки 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>;

Почему это важно:

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию

Уровень

Рейтинг:
3
Сложность:
5

Навыки

React Router

Ключевые слова

#error

#path

Подпишись на React Developer в телеграм

Frontend developer

Ментор по Frontend

Полное сопровождение до оффера — без дорогих курсов, с оплатой после трудоустройства

Записаться на консультацию