Si trabajas con Lovable y quieres que tu app navegue rápido entre páginas sin recargar todo el sitio, necesitas entender cómo funciona React Router. Esta guía te muestra qué es, por qué importa y cómo solucionar el error más común al añadir páginas nuevas.

Qué es React Router y por qué lo necesitas

Imagina un museo donde, cada vez que entras a una sala distinta, te obligan a salir por la puerta principal y volver a entrar. Frustrante, ¿verdad? Eso es justo lo que pasa en una app de React sin React Router: cada clic refresca la aplicación entera y rompe la experiencia.

Con React Router configurado, te mueves entre páginas al instante, sin parpadeos ni recargas. Es la base de cualquier single page application moderna y, en Lovable, ya viene integrado por defecto [0:33].

¿Qué hace React Router en una app? Gestiona la navegación entre páginas sin recargar el navegador. Cuando un usuario visita una URL, decide qué componente o página mostrar según las rutas que tú definiste.

Cómo organiza Lovable los componentes y las páginas

Al entrar en Edit Mode dentro de tu proyecto Lovable, vas a ver que React separa el código en carpetas para mantener todo ordenado [1:32].

• Components: bloques pequeños de UI reutilizables. Por ejemplo, un formulario que aparece tanto en la landing como en la página de contacto.
• Pages: las páginas reales que el usuario puede visitar, como home, login, style guide o not found.
• app.tsx: el archivo donde se define la navegación y se conectan las rutas con sus páginas.

Cuando abres el archivo index, probablemente veas muy poco código. Eso es normal: el contenido vive en los componentes y la página solo los importa y los compone.

Cómo se definen las rutas en app.tsx

Dentro de app.tsx encuentras la lista de rutas que Lovable ha generado. Cada ruta dice algo como: si el usuario visita esta URL, muéstrale esta página [2:21].

Por ejemplo, la ruta index redirige al visitante de tu dominio principal a la página de inicio, login lo manda al formulario de acceso, y así con cada página añadida.

Qué son las rutas protegidas en React Router

Más allá de las rutas públicas, existen las rutas protegidas. Son páginas a las que un usuario no puede acceder hasta cumplir una condición, normalmente estar autenticado [3:00].

React Router se encarga de bloquear el acceso y redirigir al usuario a otra página, como el login, mientras no cumpla la regla. Esto es clave para la seguridad de tu app.

¿Por qué no puedo entrar a una página que acabo de crear? Puede ser una ruta protegida que exige login, o una ruta que aún no has registrado en app.tsx. Revisa primero la configuración antes de pensar que es un bug.

A veces te vas a topar con que una página existe pero te bloquea la entrada. No siempre es un error: puede ser una protección activa que necesitas quitar o cumplir.

Cómo añadir una página al router en Lovable

Aquí viene lo interesante. Imagina que pediste a Lovable crear una página de testimonials o how it works, pero al revisar el menú no aparece [4:08]. Pasa más de lo que crees.

La solución es directa: abre el campo de prompt en la esquina inferior izquierda y escribe algo como create a new route for this page and add it to our router. Make sure it's in the nav bar.

Con ese prompt logras dos cosas a la vez:

1. Lovable registra la ruta en el sistema de React Router.
2. La página queda visible en la barra de navegación para que el usuario pueda hacer clic.

Después de ejecutar el prompt, la página aparece en el menú superior y es accesible directamente desde su URL.

Qué pasa si quitas una página del routing

Para entender mejor el sistema, prueba lo contrario: pide a Lovable mantener la página pero eliminarla del routing [5:27].

El resultado es claro. La página deja de aparecer en la barra de navegación porque ya no está en la lista de rutas definidas. Y si intentas visitar la URL directamente, recibes un error 404 porque Lovable ya no sabe que esa página debe servirse.

Por qué un error 404 casi siempre es un problema de routing

Según la propia experiencia mostrada en la demo, 9 de cada 10 veces que una página no aparece o devuelve 404, el problema es de rutas, no de código [6:05].

El arreglo es de los más rápidos en Lovable. Solo escribes un prompt como the page I created called Testimonials needs to be added to the routing y la herramienta corrige el archivo de rutas en segundos.

¿Cómo soluciono un error 404 en Lovable? Verifica si la página está registrada como ruta en app.tsx. Si no lo está, pídele a Lovable que añada esa página al router con un prompt corto y específico.

Una vez añadida de nuevo, la página vuelve a aparecer en el menú superior y puedes navegar a ella tanto por clic como escribiendo la URL.

Entender esta lógica te ahorra horas de debugging y te da control real sobre la navegación de tu proyecto. ¿Te ha pasado algún 404 raro en Lovable? Cuéntalo en los comentarios.