(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
Tabla de contenidos

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.

Únase a la conversación

Buy me a coffeeBuy me a coffee

Apóyenos si le gusta nuestro contenido. Gracias.

Genial! A continuación, complete el pago para obtener acceso completo a Noviello.it.
Bienvenido de nuevo! Has iniciado sesión correctamente.
Te has suscrito correctamente a Noviello.it.
Éxito! Su cuenta está completamente activada, ahora tiene acceso a todo el contenido.
Éxito! Su información de facturación ha sido actualizada.
Su facturación no se actualizó.