Problemas de caché y rutas en Netlify con aplicaciones React
Mientras desplegaba una pequeña aplicación hecha con React (una especie de gestor de usuarios), me encontré con un error que parecía no tener sentido:
Netlify decía que mi página no existía, aunque la ruta funcionaba perfectamente en local.
El problema apareció al intentar acceder directamente a una URL como esta:
1
2
3
https://pagina.com/ruta/fwefw343434
y Netlify me devolvía un 404. Sin embargo, en el código React tenía definida la ruta correctamente:
1
2
3
4
<Route
path="/ruta/:id"
element={<Page onUpdateUser={handleUpdateUser} users={users} />}
/>
🧩 ¿Por qué Netlify devuelve un 404?
El motivo no está en tu código React —sino en cómo Netlify maneja el enrutamiento de las aplicaciones de una sola página (SPA).
Cuando escribes directamente esa URL en el navegador, este le pide esa ruta exacta al servidor. Pero esa ruta no existe como archivo físico, solo existe dentro de React Router.
👉 Por eso Netlify devuelve un 404, porque busca un archivo /ruta/fwefw343434 y, claro, no lo encuentra.
Lo que necesitamos es decirle a Netlify que, ante cualquier ruta desconocida, devuelva el index.html, para que React se encargue de interpretar la ruta.
✅ Solución 1: el archivo _redirects
Esta es la forma más sencilla y rápida de resolverlo.
-
Dentro de tu carpeta
public/, crea un archivo llamado:1
_redirects
-
Escribe dentro lo siguiente:
1
/* /index.html 200
-
Guarda, haz un nuevo deploy en Netlify y prueba de nuevo la ruta.
Con esto, Netlify servirá siempre tu index.html cuando no encuentre una ruta física, permitiendo que React Router gestione el resto.
🧰 Solución 2: usar netlify.toml
Otra opción más avanzada (y útil si tienes varias reglas de configuración) es el archivo netlify.toml.
Crea un archivo llamado netlify.toml en la raíz del proyecto con este contenido:
1
2
3
4
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Guarda y despliega tu sitio.
Ahora Netlify sabrá que todas las rutas deben servir el index.html.
⚠️ Importante: elige una de las dos opciones
No uses _redirects y netlify.toml al mismo tiempo si contienen la misma regla.
Netlify prioriza el archivo _redirects, y podrías obtener resultados inesperados o confusos.
En la práctica:
- Si tu proyecto es sencillo → usa
_redirects. - Si tu proyecto crece y necesita más reglas → pasa a
netlify.toml.
🧹 Problemas de caché en Netlify
A veces, después de aplicar la corrección, parece que Netlify sigue mostrando el mismo error. Eso ocurre porque conserva una versión en caché del sitio anterior.
👉 Para solucionarlo, puedes:
- Ir al panel de Netlify.
- Entrar en tu sitio → pestaña Deploys.
- Hacer clic en “Clear cache and deploy site”.
Con eso forzarás a Netlify a reconstruir todo desde cero y aplicar correctamente tus nuevos archivos _redirects o netlify.toml.
💾 Sobre el directorio dist y el build en Netlify
Una duda habitual es si hay que borrar manualmente la carpeta dist/ antes de hacer un nuevo deploy.
La respuesta es: no hace falta 🧘♂️
Cada vez que haces un commit o despliegas, Netlify ejecuta un build completamente nuevo:
- Clona el repositorio limpio desde Git.
- Instala dependencias (
npm install,pnpm install, etc.). - Ejecuta el comando de build configurado (
npm run build). - Genera una nueva carpeta
dist/obuild/desde cero.
Así que tu carpeta local dist/ no se usa ni se sube al servidor, siempre que esté incluida en el .gitignore:
1
dist/
Solo conviene borrarla manualmente si:
- Haces pruebas locales y algo no se actualiza correctamente.
- Cambias la configuración del bundler (Vite, Webpack…).
- Sospechas de archivos residuales o corruptos.
En ese caso, puedes limpiar y regenerar con:
1
2
rm -rf dist
npm run build
Pero en los despliegues de Netlify, no es necesario: Netlify siempre crea el build desde cero y maneja su propio sistema de caché durante los deploys.
🧠 En definitiva…
El error de “página no encontrada” en Netlify no tiene nada que ver con React ni con tu código, sino con la forma en que los servidores manejan rutas en aplicaciones SPA.
La solución pasa por enseñarle a Netlify a redirigir todo hacia index.html, y por mantener limpio el caché al hacer nuevos despliegues.
Y si te lo preguntas: no, no hace falta borrar el dist/ local cada vez que haces deploy 😉
Netlify ya lo hace por ti, de forma limpia y automática.
❓ FAQ
¿Por qué Netlify muestra 'Página no encontrada' al acceder a rutas internas de mi app React?
Porque Netlify busca físicamente esa ruta en el servidor. En una SPA las rutas solo existen dentro de React Router, así que es necesario configurar redirecciones para que todas las rutas apunten a index.html.
¿Qué diferencia hay entre usar el archivo _redirects y el archivo netlify.toml?
Ambos sirven para configurar redirecciones, pero no deben coexistir con las mismas reglas. Lo recomendable es usar uno solo: _redirects si buscas simplicidad, o netlify.toml si quieres una configuración más avanzada.
¿Cómo limpiar la caché en Netlify tras hacer cambios en el enrutamiento?
Puedes usar la opción 'Clear cache and deploy site' desde el panel de Netlify o ejecutar un redeploy completo para que se regeneren los archivos correctamente.
¿Es necesario borrar la carpeta dist antes de desplegar en Netlify?
No. Netlify genera el directorio dist desde cero en cada build. Solo conviene borrarlo manualmente si experimentas errores locales o artefactos de compilaciones anteriores.