.jpg)

Рано или поздно пользователь попадёт на URL, которого нет на вашем сайте. Вместо того, чтобы позволить ему уйти назад, покажите полезную страницу 404, чтобы помочь найти нужную информацию и сохранить пользователя на сайте.

Для сайтов на React это легко организовать с помощью react-router: создать компонент NotFound и прописать маршрут, который сработает для всех нераспознанных путей.

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

Ошибка 404 означает, что сервер не нашёл запрошенную страницу. Как разработчик, вы создаёте заменяющую страницу, которую приложение покажет в этом случае.

Предполагается, что приложение React уже настроено и использует маршрутизацию. Если нет — сначала создайте приложение и установите react-router-dom.

Создайте файл NotFound.js и добавьте следующий код:

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

export default function NotFound() {
    return (
        

            
Упс! Похоже, вы потерялись.
            
Вот несколько полезных ссылок:
            
        
    );
}

Этот компонент выводит сообщение и ссылки на ключевые разделы сайта. Переводите и описывайте ссылки так, чтобы пользователю было понятно, куда они ведут.

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

В react-router вы прописываете маршруты через компонент Routes и указываете путь и компонент для рендеринга.

Пример маршрута для компонента Home:

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

function App() {
    return (
        
            } />
        
    );
}

Чтобы покрыть все несуществующие пути, используйте символ звёздочки ‘*’, который матчится с любым URL:

} />

Компонент NotFound отрендерится для всех URL, не описанных явно в наборе маршрутов.

Серверная конфигурация для SPA

Важно: если ваше приложение — SPA, браузер может запрашивать путь напрямую у сервера (например, при обновлении страницы). Сервер должен возвращать index.html для неизвестных путей, чтобы клиентская маршрутизация могла обработать URL и показать NotFound. В противном случае сервер вернёт собственную 404-страницу, и пользователь не увидит ваш компонент.

Настройка сервера:

• Nginx: настройте try_files $uri /index.html;
• Apache: используйте RewriteRule для перенаправления на index.html;
• Static hosts (Netlify, Vercel): включите option “redirect all to /index.html” или настройку SPA.

Когда это не сработает

• Сервер по ошибке возвращает 404 до загрузки SPA — пользователь увидит серверную страницу.
• Вы используете выносную генерацию статических страниц и не включили fallback.
• SEO-боты требуют корректного HTTP-кода 404. Если вы всегда возвращаете 200 с кастомной страницей, поисковики могут индексировать несуществующие URL.

Важно: для SEO часто рекомендуется возвращать код 404/410 с серверной стороны для несуществующих страниц, а для UX показывать пользовательскую 404 внутри SPA.

Альтернативные подходы

• Серверная 404-страница с шаблоном и обычным HTML (для SEO и небольших сайтов).
• Гибрид: сервер возвращает 404 + ваш HTML-контент, чтобы оба требования — UX и SEO — были выполнены.
• Переадресация на релевантные разделы (301/302) — осторожно, это меняет ожидаемое поведение.

Чек-лист ролей

• Разработчик:
  • Создал компонент NotFound и маршрут path=’*’.
  • Проверил, что компонент рендерится на клиентах и при прямом запросе.
• Дизайнер:
  • Подготовил макет и варианты для мобильных и десктопов.
  • Определил CTA и полезные ссылки.
• DevOps:
  • Настроил серверную отдачу index.html для SPA.
  • Проверил HTTP-коды для SEO (404/200 поведение).

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

• NotFound отображается для произвольного несуществующего URL.
• Сервер корректно отдаёт index.html для SPA-запросов (если требуется).
• Для SEO: при необходимости сервер возвращает код 404/410.
• Ссылки на странице работают и ведут в полезные разделы.

Визуальные и UX-советы

• Укажите причину (коротко) и два-три пути продолжить навигацию.
• Добавьте поле поиска, если сайт большой.
• Сохраните тон и оформление бренда, но сделайте страницу простой для сканирования.

Диаграмма принятия решения

graph TD
  A[Пользователь открывает URL] --> B{Есть маршрут?}
  B -- Да --> C[Рендерить компонент]
  B -- Нет --> D[Рендер NotFound]
  D --> E{Запрос к серверу напрямую?}
  E -- Да --> F{Сервер отдает index.html?}
  F -- Да --> D
  F -- Нет --> G[Серверная 404 и SEO 404]
  E -- Нет --> D

Важно: диаграмма показывает ключевой момент — серверная конфигурация определяет, увидит ли пользователь клиентскую 404-страницу.

Итоги

• Небольшой компонент NotFound и маршрут path=’*’ решают задачу для клиентской стороны.
• Проверьте серверную логику для корректной работы при прямых запросах.
• Балансируйте UX и SEO: иногда нужно возвращать 404 код, но показывать дружелюбный интерфейс.

Примечание: тестируйте на разных окружениях и с реальными URL, чтобы убедиться, что поведение соответствует ожиданиям.