Como solucionar el problema al momento de recargar una página en ReactJs cuando se utiliza react router (nginx)

Es muy común que cuando lanzamos la aplicación de producción de React y la subimos a nuestro servidor la pagina no funcionara correctamente esto se debe a que el servidor sigue unas instrucciones para montar la página, pero no reconoce que estamos usando un sistema de rutas por componentes en la pagina web.

Esta solución solo funciona si tiene en control del servidor web y pueden acceder a las configuraciones de nginx. Deben de tener el conocimiento para poder acceder desde SSH o desde el panel de control de su proveedor de servidores. Una vez que se acede al servidor iniciamos el proceso.

El archivo que se debe de editar es el que le da las instrucciones a nginx para montar la página, el nombre predeterminado es default, este archivo puede tener otro nombre si tienen varias páginas o si lo renombraron anteriormente. El archivo se encuentra en la siguiente ruta /etc/nginx/sites-available por lo cual hacemos un cd a esa ruta y un ll para ver los archivos.

Editamos el archivo con permisos de administrador sudo nano default podemos ver el contenido y bajamos para ver el bloque de código encargado de la location se vera de la siguiente manera.

Modificamos la parte de location por la siguiente, las líneas que tienen # al inicio son comentarios por lo cual queda de la siguiente manera.

Guardamos con CTRL + O y cerramos con CTRL + X solo queda verificar que la configuración sea correcta con el siguiente comando sudo nginx -t si nos da el siguiente mensaje es que todo funciono correctamente.

Y para finalizar reiniciamos el servicio de Nginx para que todo funcione correctamente sudo systemctl reload nginx.service con estos pasos la pagina de react debe de funcionar correctamente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *