Введение
После создания рабочей сборки приложения ReactJS создайте файл index.html, который обслуживает все приложение. Все запросы должны быть сначала отправлены на index.html, затем маршрутизатор React обслуживает контент на основе запроса в URL-адресе. Когда мы обращаемся к приложению с основным URL-адресом, оно достигает index.html и работает нормально. Если вы перейдете непосредственно по вторичному URL-адресу в браузере, веб-сервер не найдет файлы с таким именем. Если это так, пользователю возвращается сообщение об ошибке 404.
Проблема
Веб-сервер возвращает сообщение об ошибке 404, когда мы напрямую достигаем вторичного URL-адреса производственного приложения ReactJS:
Решение
Простое решение — направить все запросы в файл index.html. Остальное, маршрутизатор React позаботится об этом.
Обновите конфигурацию вашего сервера в соответствии с работающим веб-сервером.
пользователи Nginx
Пользователи Nginx могут отредактировать файл конфигурации блока сервера (виртуального хоста) и добавить следующий фрагмент. Это направит все запросы в файл index.html:
#Add this in Nginx server block
location /{...
try_files $uri.html $uri $uri//index.html;...
}Пользователи Apache
Если реагирующее приложение размещено на веб-сервере Apache. Затем вы можете добавить файл .htaccess в корень вашего сайта и добавить следующий фрагмент.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME}!-f
RewriteCond %{REQUEST_FILENAME}!-d
RewriteCond %{REQUEST_FILENAME}!-l
RewriteRule. /index.html [L]
</IfModule>Убедитесь, что в вашей системе включен модуль перезаписи Apache.
Вывод
Это руководство помогло устранить ошибку 404 в производственной среде ReactJS.
