Has trabajado duro en tu aplicación React, la has desplegado en Vercel o Netlify, y de repente… ¡zas! Un frustrante error 404 cuando intentas navegar por las rutas internas. ¿Te suena familiar? Este es un problema muy común en las Single Page Applications (SPA) y, créeme, tiene una solución sencilla y rápida.
En este artículo, te explico por qué ocurre y cómo solucionarlo en cuestión de minutos. ¡Y lo mejor de todo es que también puedes ver mi video explicativo para guiarte paso a paso!
¿Por qué aparece el error 404 en tus rutas?
Cuando desarrollas una aplicación con React Router (o cualquier otra librería de enrutamiento del lado del cliente), solo tienes un archivo index.html. Tu aplicación JavaScript se encarga de cambiar el contenido de la página sin recargarla.
El problema surge cuando despliegas tu aplicación en servicios como Vercel o Netlify. Si un usuario intenta acceder directamente a una ruta como tudominio.com/acerca-de, el servidor busca un archivo físico llamado acerca-de y, al no encontrarlo, devuelve el famoso error 404. El servidor no sabe que tu aplicación React es la que debe manejar esa ruta internamente.
La solución: Redirecciones inteligentes
La buena noticia es que Vercel y Netlify (y la mayoría de los servicios de hosting para SPAs) permiten configurar reglas de redirección o reescritura. Esto le dice al servidor: «Oye, si no encuentras una ruta específica, redirige todo al index.html de mi aplicación». De esta forma, tu aplicación React tomará el control y gestionará el enrutamiento interno correctamente.
El código mágico para Vercel
Para Vercel, la solución es increíblemente simple. Solo necesitas crear un archivo llamado vercel.json en la raíz de tu proyecto (al mismo nivel que tu package.json) y añadir el siguiente código:
{
"rewrites": [
{
"source": "/(.*)",
"destination": "/index.html"
}
]
}
¿Qué hace este código? Básicamente, le dice a Vercel que cualquier solicitud (/(.*), es decir, cualquier ruta) debe ser reescrita internamente para que apunte a index.html. Tu aplicación React, que se carga desde index.html, se encargará entonces de renderizar el componente correcto para esa ruta.
¿Y para Netlify?
Aunque en el artículo me centro en Vercel, la lógica es idéntica para Netlify. En lugar de un vercel.json, crearías un archivo llamado _redirects en la carpeta public de tu proyecto (o en la raíz si no usas create-react-app). El contenido sería aún más simple:
/* /index.html 200Esta línea le dice a Netlify que cualquier solicitud (/*) debe ser servida por /index.html con un código de estado 200 (OK), lo que permite que tu SPA maneje la ruta.
