Tu APP React con react-router funciona perfecto en localhost, pero cuando la subes a Netlify tienes problemas con las rutas.

El problema ocurre cuando intentas entrar a una ruta particular. Por ejemplo, al ir directamente a tusitio.com/about, Netlify mostrará un error 404 genérico.

Pero cuando vas a tusitio.com y haces clic en un enlace que te lleva a tusitio.com/about, todo funciona correctamente.

¿Suena familiar?

La solución

Agrega en tu carpeta public un archivo llamado _redirects y agrega este contenido: /* /index.html 200

Eso dice que todo request (el “/*”) lo redireccione a “/index.html” y que responda con código HTTP 200.

Esto hace que cuando vayas a tusitio.com/about:

  • Netlify dice: “ah, tengo que responder con index.html todo lo que me pregunten”. Así que envía el archivo index.html
  • Tu browser recibe el archivo index.html y lo carga.
  • El index.html carga tu aplicación React
  • Tu aplicación React carga react-router
  • react-router ve que estás en la ruta /about y hace toda su magia.

Y es así como tu sitio funciona de maravilla.

Por qué ocurre el problema de 404 con react-router en Netlify

Recordemos que una aplicación React es una aplicación de cliente. Primero tiene que cargar el HTML, luego el JavaScript. Entonces todo lo relacionado con las rutas se maneja luego de cargar el HTML.

Netlify responde con lo que tienes en index.html cuando entras a tusitio.com, pero no sabe qué hacer cuando entras directamente a tusitio.com/about (sí, es medio bruto).

Seguramente, lo que intenta hacer cuando entras a tusitio.com/about es buscar el archivo about.html o about/index.html dentro de tu carpeta public. Como no los encuentra: BOOM! 404.