Что такое маршруты-заглушки (fallback routes), и как их реализовать?

Этот вопрос проверяет понимание маршрутов-заглушек

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

Маршруты-заглушки обрабатывают ситуации, когда запрашиваемый маршрут не существует. Они реализуются с помощью маршрута * и позволяют показывать страницу ошибки или редиректить на основной маршрут.

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

Маршруты-заглушки — это маршруты, которые срабатывают, если ни один из ранее определенных маршрутов не совпал с текущим URL. В React Router они задаются через путь *.

 

Пример реализации:

import { Routes, Route } from 'react-router-dom';

const App = () => (
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/about" element={<About />} />
    <Route path="*" element={<NotFound />} /> {/* Маршрут-заглушка */}
  </Routes>
);

const NotFound = () => <h1>404: Page Not Found</h1>;

Если пользователь переходит на несуществующий путь, например /unknown, отобразится компонент NotFound.

 

Использование маршрутов-заглушек улучшает пользовательский опыт, предотвращая показ пустых страниц и направляя пользователя к полезной информации.

Уровень

  • Рейтинг:

    2

  • Сложность:

    6

Навыки

  • React Router

    React Router

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

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