(Решено) - Ошибка ReactJS 404 при перезагрузке страницы

Введение

После создания рабочей сборки приложения 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.