Introducción
Después de crear una compilación de producción de su aplicación ReactJS , cree un archivo index.html, que sirva para toda la aplicación. Todas las solicitudes deben enviarse primero a index.html, luego el enrutador React sirve el contenido según la consulta en la URL. Cuando accedemos a la aplicación con la URL principal, llega a index.html y funciona bien. En caso de que vaya directamente a una URL secundaria en el navegador, el servidor web no puede encontrar ningún archivo con ese nombre. Si es así, se devuelve al usuario un mensaje de error 404.
Problema
El servidor web devuelve un mensaje de error 404 cuando llegamos directamente a una URL secundaria de una aplicación ReactJS de producción:
Solución
Una solución simple es enrutar todas las solicitudes al archivo index.html. Descansa, el enrutador React se encargará de esto.
Actualice la configuración de su servidor de acuerdo con el servidor web en ejecución.
Usuarios de Nginx
Los usuarios de Nginx pueden editar el archivo de configuración del bloque del servidor (host virtual) y agregar el siguiente fragmento. Esto dirigirá todas las solicitudes al archivo index.html:
#Add this in Nginx server block
location / {
...
try_files $uri.html $uri $uri/ /index.html;
...
}Usuarios apache
Si la aplicación de reacción está alojada en un servidor web Apache. Luego puede agregar un archivo .htaccess a la raíz de su sitio y agregar el siguiente fragmento.
<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>Asegúrese de que el módulo de reescritura de Apache esté habilitado en su sistema.
Conclusión
Este tutorial ayudó a resolver el error 404 en el entorno de producción de ReactJS.
