Обработка несуществующих маршрутов

Когда пользователь переходит по URL, который не соответствует ни одному из определённых маршрутов, приложение должно отображать страницу с сообщением об ошибке — обычно это страница «404 — Страница не найдена». React Router позволяет легко реализовать такой fallback-маршрут.

Маршрут-заполнитель *

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

// App.jsx
import { Routes, Route } from 'react-router-dom';
import HomePage from './pages/HomePage';
import NotFound from './pages/NotFound';

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

Важно: маршрут с path="*" должен быть последним в списке, так как <Routes> выбирает первый совпадающий маршрут. Если поставить его выше, он будет перехватывать все запросы.

Содержимое страницы 404

Страница NotFound может содержать:

  • понятное сообщение для пользователя;
  • кнопку «На главную» или ссылку на основные разделы;
  • логотип или элементы бренда для сохранения узнаваемости.

Пример:

// NotFound.jsx
import { Link } from 'react-router-dom';

function NotFound() {
  return (
    <div>
      <h1>Страница не найдена</h1>
      <p>К сожалению, такой страницы не существует.</p>
      <Link to="/">Вернуться на главную</Link>
    </div>
  );
}

Рекомендации

  • Всегда добавляйте маршрут * в конце — это улучшает пользовательский опыт и предотвращает пустой экран;
  • Не используйте * для других целей (например, динамических маршрутов) — только как fallback;
  • В реальных проектах страница 404 часто стилизуется в соответствии с общим дизайном приложения.

Такой подход делает приложение более надёжным и дружелюбным к пользователю.