Ошибка 404 при обновлении страницы в SPA (React Router, Vue Router)
Типичная ситуация: SPA на React или Vue работает, переходы между страницами
идут гладко, но стоит обновить внутреннюю страницу (например, /about) —
браузер показывает 404. Разберёмся, почему так и как это чинится.
Почему появляется 404
В одностраничном приложении (SPA) маршрутизацию делает JavaScript в браузере, а
не сервер. Реально на хостинге лежит только один index.html. Когда вы переходите
по ссылке внутри приложения, React Router или Vue Router подменяет адрес в строке,
не обращаясь к серверу.
Но когда вы перезагружаете /about, браузер запрашивает у сервера файл по
этому пути. Такого файла нет — есть только index.html — поэтому сервер отвечает
404.
Решение: фолбэк на index.html
Нужно, чтобы сервер на любой неизвестный путь отдавал index.html, а дальше
роутер сам покажет нужную страницу. Это называется SPA-фолбэк.
На обычном хостинге это настраивается вручную (в nginx — try_files $uri /index.html,
на Apache — через .htaccess).
На Tuqo это работает из коробки
Если в вашей сборке есть index.html и клиентская маршрутизация — Tuqo
автоматически отдаёт index.html на внутренние маршруты. Никакой настройки не
нужно: задеплоили SPA — и перезагрузка /about работает корректно.
npm run build # появится dist/ или build/ с index.html
tar -czf site.tar.gz -C dist .
# деплой — фолбэк на index.html включится самКогда нужен настоящий 404
Если у вас многостраничный статический сайт (не SPA), где каждая страница —
отдельный файл, фолбэк на index.html не нужен: несуществующий адрес должен
честно отдавать 404. Tuqo различает эти случаи по структуре сборки.