404 в React: как создать полезную страницу

Кратко

Коротко: настройте отдельную компоненту 404, подключите её в маршрутах через path=”*” и добавьте понятные ссылки и подсказки пользователю. Тестируйте как клиентскую, так и серверную обработку статуса 404.

Ноутбук с отображением страницы 404 и сообщением об ошибке .jpg?w=1600&h=900&fit=crop)

Рано или поздно пользователь попадёт на URL, который не существует на вашем сайте. Что он сделает дальше — зависит от вас: уйдёт назад или выведите полезную страницу 404, которая поможет продолжить навигацию по сайту.

Для React‑приложений удобно использовать react-router для отображения страницы 404 (Not Found) всякий раз, когда маршрут не совпадает ни с одним из заданных.

Что такое ошибка 404

Ошибка 404 возникает, когда сервер не может найти запрошенную страницу. Для разработчика это значит: подготовить страницу, которую сервер или клиент покажет вместо отсутствующей ресурса. В одностраничных приложениях (SPA) важно покрыть оба сценария: клиентский рендеринг (react-router) и серверную обработку (SSR/edge), чтобы как пользователи, так и поисковые боты получили корректный ответ.

Важно

Клиентский маршрут сработает только после загрузки приложения в браузере. При SSR нужно возвращать HTTP‑статус 404 и рендерить ту же или похожую страницу.
Не показывайте внутренние ошибки или отладочную информацию на 404‑странице.

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

Ниже — минимальная и понятная компонента NotFound.js. Она показывает сообщение и ссылки на важные разделы сайта.

import { Link } from "react-router-dom";

export default function NotFound() {
  return (
    
      Упс! Похоже, вы заблудились.
      Вот несколько полезных ссылок:
      
        
          Главная
          Блог
          Контакты
        
      
    
  );
}

Пояснение по коду: импортируем Link из react-router-dom, возвращаем простую разметку с заголовком, пояснением и набором ссылок для продолжения навигации.

Совет по доступности: оборачивайте навигационные ссылки в

и используйте семантические списки, чтобы экранные читалки легче ориентировались.

Маршрутизация на страницу 404

В React Router вы указываете набор маршрутов через компонент . Пример роута для главной страницы:

import { Route, Routes } from "react-router-dom";
import Home from './Home';
import NotFound from './NotFound';

function App() {
  return (
    
      } />


      } />
    
  );
}

Специальный путь “*” совпадает со всем, что не подошло под предыдущие маршруты, поэтому NotFound будет показан для всех неизвестных URL.

Примечание

Убедитесь, что маршрут с “*” стоит последним, если порядок маршрутов имеет значение в вашей конфигурации.

Дополнительные подходы и когда они применимы

Клиентская 404 (react-router): когда приложение — SPA и важна плавная навигация. Пользователь получит страницу после загрузки JS.
Серверная 404 (SSR / static hosting): сервер возвращает HTTP‑статус 404 и HTML с нужным контентом — важно для SEO и корректной обработки поисковыми системами.
Комбинированный подход: при универсальном рендеринге возвращайте 404‑статус от сервера и одновременно рендерьте ту же NotFound‑компоненту на клиенте.

Контрпример / когда не подходит

Простая статическая страница 404 на CDN подходит для контента без JS, но плоха для динамических приложений, где нужно сохранить навигацию и контекст пользователя.

Ментальная модель

Представьте 404 как «указатель на перекрёстке»: он не только сообщает о проблеме, но и показывает направление — куда пользователь может пойти дальше (главная, поиск, карта сайта).

Чеклист для внедрения (роль‑ориентированный)

Разработчик:

Добавить компонент NotFound и маршрут path=”*”.
Проверить семантику (h1, nav, ul/li).
Обработать SSR: вернуть HTTP 404 для отсутствующих страниц.

QA:

Протестировать неизвестные URL вручную и автоматизированно.
Проверить доступность: чтение заголовка и навигации экранными читалками.
Убедиться, что ссылки ведут на рабочие страницы.

Продукт/маркетинг:

Утвердить текст и CTA (кнопки/ссылки).
Убедиться, что 404 не раскрывает лишней информации.

Критерии приёмки

При переходе на несуществующий URL отображается компонент NotFound.
Страница содержит понятный заголовок и минимум 2‑3 ссылки для продолжения навигации.
При SSR сервер возвращает HTTP 404 (для сайтов с серверной генерацией).
Страница проходит базовые проверки доступности (semantics, табуляция, screen readers).

Тесты и примеры сценариев

Ручное тестирование:

Открыть /non-existent-page — увидеть NotFound и ссылки.
Нажать каждую ссылку — перейти на ожидаемую страницу.

Автоматизированные тесты (пример с Jest/React Testing Library):

Рендер NotFound и проверка наличия заголовка и 3 ссылок.
Маршрутизация: смонтировать и убедиться, что NotFound отрисован.

SEO и практичные замечания

Для SEO важно, чтобы при SSR сервер отдавал HTTP‑статус 404. Если SPA показывает 404 только на клиенте, поисковые боты могут считать страницу успешной (200). Это ухудшит индексацию.
Не используйте 404 как замену для soft 404: если контент недоступен навсегда — отдавайте корректный статус.

Мини‑методология: внедрение в 5 шагов

Создать NotFound.js с семантической разметкой.
Добавить маршрут path=”*” в Routes.
Проверить навигацию и доступность.
Настроить серверную обработку 404 при SSR/Edge.
Написать тесты и согласовать текст/CTA с продуктом.

Шаблон для быстрой проверки (cheat sheet)

Компонент: NotFound.js — есть h1, краткий текст, nav с ul/li.
Маршрут: } />
SSR: сервер возвращает 404, рендерит ту же страницу.
Accessibility: nav, aria‑labels при необходимости.

Сводка

Страница 404 — простой, но важный элемент UX. В React её проще всего реализовать как компонент и подключить через path=”*” в react‑router. Для полного покрытия убедитесь, что сервер возвращает HTTP 404 при SSR, проверьте доступность и добавьте понятные ссылки для продолжения навигации.

Важно

Не показывайте внутреннюю отладочную информацию на 404‑странице и проверяйте всё на тестовой и продовой среде.