(Corregido) - Error ReactJS 404 al recargar la página

19 apr 2022 1 min di lettura
(Corregido) - Error ReactJS 404 al recargar la página
Indice dei contenuti

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.

Buy me a coffeeBuy me a coffee

Supportaci se ti piacciono i nostri contenuti. Grazie.

Successivamente, completa il checkout per l'accesso completo a Noviello.it.
Bentornato! Accesso eseguito correttamente.
Ti sei abbonato con successo a Noviello.it.
Successo! Il tuo account è completamente attivato, ora hai accesso a tutti i contenuti.
Operazione riuscita. Le tue informazioni di fatturazione sono state aggiornate.
La tua fatturazione non è stata aggiornata.