404 в React и SPA: правильный статус и роутинг

Почему SPA отдаёт 200 вместо 404

В одностраничном приложении все адреса обслуживает один файл index.html. Пользователь открывает /products/123, сервер не знает такого файла и по правилу «на всё отдавать index.html» возвращает его с кодом 200. Роутер в браузере сопоставляет путь с маршрутами и, не найдя, рисует компонент «Страница не найдена». Робот видит заголовок 200 и обычную страницу — отсюда soft 404.

location / {
    try_files $uri /index.html;   # любой неизвестный путь -> 200
}

Клиентский роутинг: страница 404 в React Router

В React Router (v6.4+) добавьте маршрут-перехватчик * и errorElement для ошибок загрузки данных:

import { createBrowserRouter, RouterProvider, useRouteError, isRouteErrorResponse } from "react-router-dom";

function NotFound() {
  return (
    <main>
      <meta name="robots" content="noindex" />
      <h1>Страница не найдена</h1>
      <a href="/">На главную</a>
    </main>
  );
}

function RouteError() {
  const error = useRouteError();
  if (isRouteErrorResponse(error) && error.status === 404) return <NotFound />;
  return <h1>Что-то пошло не так</h1>;
}

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    errorElement: <RouteError />,
    children: [
      { index: true, element: <Home /> },
      {
        path: "products/:id",
        loader: async ({ params }) => {
          const res = await fetch("/api/products/" + params.id);
          if (res.status === 404) throw new Response("Not Found", { status: 404 });
          return res.json();
        },
        element: <Product />,
      },
      { path: "*", element: <NotFound /> },
    ],
  },
]);

Тег <meta> внутри компонента в React 19 переносится в <head> автоматически; в более ранних версиях используйте react-helmet-async. Этот приём в документации Google по JavaScript SEO описан как один из способов пометить страницу ошибки в SPA: добавить noindex через JavaScript.

Как отдавать настоящий 404

1. Серверная проверка пути. Сервер или API знает, какие адреса существуют (например, карточка товара есть в базе), и для остальных отдаёт 404, а не index.html. Для статического набора маршрутов можно собрать белый список путей при сборке.
2. SSR или предрендеринг. Next.js, Remix / React Router framework mode, Vite SSR и подобные решения рендерят страницу на сервере и выставляют статус в ответе. В React Router при SSR статус берётся из context.statusCode после createStaticHandler.
3. Перенаправление на адрес с настоящим 404. Google допускает перенаправить робота JavaScript-ом на URL, который на сервере отвечает 404 (например, /not-found).
4. `noindex` через JavaScript. Если ни одно решение недоступно, добавьте <meta name="robots" content="noindex"> на страницу ошибки. Статус останется 200, но страница не попадёт в индекс.

Особый случай: GitHub Pages и Netlify

GitHub Pages отдаёт кастомную страницу ошибки из файла 404.html в корне публикуемой папки — со статусом 404. Известный приём для SPA — скопировать index.html в 404.html, чтобы приложение открывалось на глубоких ссылках, но тогда каждый внутренний адрес отвечает 404 и плохо индексируется. Netlify и Vercel позволяют задать rewrite на index.html со статусом 200 — это снова soft 404 для неизвестных путей; используйте его только для известных маршрутов.

Редиректы в SPA

<Navigate to="/new" replace /> и navigate() работают только на клиенте. Для поисковых систем это не 301: сервер сначала отдаёт 200. Постоянные редиректы нужны на уровне сервера или платформы хостинга.

/old-page  /new-page  301
/blog/*    /articles/:splat  301

{
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ]
}

Для своего сервера см. nginx и Apache. Правила можно сгенерировать в генераторе редиректов.

Как найти 404 в SPA

Серверные логи не помогут: все запросы к страницам заканчиваются кодом 200. Проверьте, что отдаёт неизвестный адрес, в проверке HTTP-статуса и найдите битые ссылки на странице: проверка битых ссылок. Страницы, которые SPA считает несуществующими, можно фиксировать на клиенте — для этого подходит Monitor404.

Подключение Monitor404 к React

Простой вариант — загружать скрипт при показе компонента 404, чтобы событие фиксировалось на нужном адресе:

import { useEffect } from "react";

function NotFound() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://collect.monitor404.ru/collect/ВАШ_ТОКЕН/script.js";
    s.async = true;
    document.body.appendChild(s);
    return () => { s.remove(); };
  }, []);

  return <h1>Страница не найдена</h1>;
}

Второй вариант — режим auto: <script src="https://collect.monitor404.ru/collect/ВАШ_ТОКЕН/script.js?mode=auto" async></script> в index.html. Он отправляет событие, только когда сервер ответил на загрузку страницы кодом 404 или 410, поэтому подходит, если сервер уже отдаёт настоящий 404 для неизвестных адресов (SSR, пререндер, настроенный nginx). Для чистой SPA, где сервер всегда отвечает 200, используйте первый вариант. Если у приложения есть бэкенд, 404 можно отправлять и через серверный API с HMAC-подписью — там известен реальный статус.