Navegación programática en React con useNavigate

La navegación programática con useNavigate te permite mover al usuario entre páginas directamente desde el código, sin depender de un link visible. Es ideal para redirigir después del login, tras enviar un formulario o al hacer clic en una carta. Si trabajas con React Router, este patrón te resulta indispensable.

Por qué necesitas navegar desde el código y no solo con links

No toda navegación ocurre con un enlace que el usuario ve en pantalla. Hay momentos en los que tu aplicación decide moverse sola: cuando alguien inicia sesión, cuando completa un formulario o cuando selecciona una propiedad. Ahí es donde entra la navegación programática [00:00].

Para resolver estos casos, React Router ofrece un hook llamado useNavigate. Su trabajo es simple pero potente: redirigir al usuario a otra ruta desde tu lógica de JavaScript, no desde el HTML.

¿Qué es useNavigate en React Router? Es un hook que devuelve una función para redirigir al usuario a otra ruta desde el código. Lo usas cuando la navegación depende de una acción, como un login exitoso o el envío de un formulario.

Cómo implementar useNavigate en una página de login

El primer paso es importar el hook directamente desde React Router. El propio editor suele recomendarlo y, al aceptarlo, trae varias piezas de código útiles [00:34].

Esto es lo que aparece cuando aceptas la sugerencia:

• La importación del hook con import { useNavigate } from 'react-router'.
• Una constante llamada navigate que guarda el resultado de ejecutar el hook, para usarlo más fácil.
• Un método handleLogin que encapsula la función navigate con el path de destino, en este caso profile.

jsx import { useNavigate } from 'react-router';

const navigate = useNavigate();

const handleLogin = () => { navigate('/profile'); };

Hasta aquí no verás ningún cambio, porque todavía no estás usando handleLogin [01:20]. Para activarlo, conectas la función al evento del botón:

jsx <button onClick={handleLogin}>Entrar</button>

Al presionar el botón que dice entrar, se ejecuta la función, se llama al hook y te redirige a profile. Así de directo.

Cómo evitar que el usuario vuelva atrás con replace true

Aquí viene lo interesante. Si el usuario da clic en volver atrás después del login, podría recuperar datos almacenados en el navegador. Eso no siempre es seguro, sobre todo si hay información de sesión o un botón de cerrar sesión de por medio [02:10].

React Router tiene un truco: pasar un segundo parámetro con la opción replace: true.

jsx navigate('/profile', { replace: true });

¿Para qué sirve replace true en useNavigate? Reemplaza la entrada actual en el historial del navegador. Si el usuario intenta volver atrás, lo lleva a la página anterior a la que estaba, saltándose la ruta de login y protegiendo los datos de sesión.

Un ejemplo concreto: si estabas en favoritos, luego fuiste a login y presionaste entrar, al volver atrás no regresas a login, sino directamente a favoritos [02:50]. Es un método de protección para evitar que otra persona recupere una sesión cerrada o datos de un formulario ya enviado en el mismo navegador.

Cómo dar acción a las cards de propiedades con useNavigate

Las cards de propiedades, hasta ese momento, no enlazaban a ningún lado ni tenían acción. Para cambiarlo, vas al archivo PropertyCard y aplicas el mismo patrón [03:40].

Importas el hook, creas la constante navigate y escribes un manejador que redirija a la página individual de cada propiedad usando su ID:

jsx const navigate = useNavigate();

const handlePropertyClick = () => { navigate(/properties/${propertyId}); };

Tienes dos formas de conectarlo:

1. Declarar el método arriba y llamarlo desde el onClick.
2. Usar la función directamente dentro del onClick.

En ambos casos, al hacer clic sobre la primera propiedad te redirige a /properties/1, y sobre la cuarta a /properties/4, tomando el ID dinámico de cada carta [04:30].

Por qué aparece página no encontrada al hacer clic

Quizás notes que aparece un mensaje de página no encontrada, y eso tiene mucho sentido. Todavía no existen las páginas anidadas ni la forma de renderizar un single de propiedades [05:00].

Como la ruta /properties/4 no hace match con ninguna de las rutas registradas en el router (/, search, favorites, profile o login), React Router toma el comodín y muestra la not found page.

Es un error intencional, no un fallo real. Se resuelve más adelante agregando las rutas anidadas que faltan.

La navegación programática con useNavigate será clave para login, reservas y selección de propiedades. ¿Ya lo estás aplicando en tu proyecto? Cuéntanos en los comentarios cómo lo resolviste.