Problemas con React Router y su Deployment en Netlify

Obed Sánchez — Wed, 23 Mar 2022 12:52:59 +0000

Tenía problemas para que la rutas creadas con React Router V6 funcionaran en producción, intenté subir mi app en github-pages, keroku y nada... investigué y así lo pude solucionar.

Netlify tiene una configuración para que las request siempre redirijan al index.html, que es básicamente la raíz del problema que tenemos. Si ponemos en el navegador http://host/clientes/nuevo, por ejemplo, al no existir realmente ese archivo nuevo.html en el proyecto, el servidor lanza el Not Found, aunque esa ruta exista en nuestro proyecto.

Para solucionarlo puedes intentar hacer lo siguiente.

Hagan la build de su aplicación con npm run build, yo usé Vite como empaquetador
Pueden hacer npm run preview para comprobar que funciona la aplicación construida para producción.
El la carpeta dist que se crea al hacer el build agregen un archivo llamado __redirects , así sin extensión ni nada, ojo que son dos guiones bajos "_" al inicio.
En ese archivo pongan lo siguiente: /* /index.html 200 , sin más, lo guardan y listo
Hagan el deploy manual en Netlify, arrastran la carpeta dist y ya, con eso debería ser suficiente.

Aquí les dejo de la información en inglés al respecto: https://chrisotto.dev/react-netlify-client-side-routing/

Otra cosa... sé que si se hace el back-end en Express o similares, ya tienen opciones para que este error no pase. En mi caso no tenía ningún back construido.

Espero les ayude.

Saludos de un Noobdev

Let's keep coding

ObedSAGA

DEV Community: Obed Sánchez

Problemas con React Router y su Deployment en Netlify