Navegar entre rutas en React no siempre depende de un clic en un enlace. Con el hook useNavigate de React Router Dom 6 puedes mover al usuario de una ruta a otra desde código JavaScript, reaccionando a eventos, condiciones o tiempos definidos. Esta guía es útil si ya trabajas con Link o NavLink y quieres dar el siguiente paso hacia navegaciones dinámicas.

Por qué la prop key evita errores en listas renderizadas con map

Antes de tocar la navegación, hay un detalle que ensucia la consola: cuando renderizas arreglos de componentes con .map, React necesita una prop key única por elemento. Sin ella, aparecen esos warnings rojos tan incómodos.

En el componente BlogPage, cada BlogLink debe recibir un identificador único. El candidato natural es el slug del post, porque no se repite entre publicaciones [3:12].

jsx {posts.map(post => ( <BlogLink key={post.slug} {...post} /> ))}

En el menú pasa lo mismo: cada elemento li necesita su propia key, y en ese caso usamos route.to, que también es único por ruta.

¿Qué es la prop key en React? Es un identificador único que React usa para distinguir elementos dentro de una lista renderizada. Sin key, React no sabe qué elemento cambió y muestra warnings en consola.

Cómo funciona el hook useNavigate de React Router Dom

El hook useNavigate se importa desde react-router-dom y devuelve una función, normalmente llamada navigate, que recibe la ruta destino como argumento. La diferencia con Link es clara: Link navega cuando el usuario hace clic en él, mientras que navigate se ejecuta cuando tú lo decidas en tu código JavaScript [3:45].

Como todo React Hook, debes llamarlo en el cuerpo del componente, no dentro de condicionales ni funciones anidadas.

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

function BlogPost() { const navigate = useNavigate();

const returnToBlog = () => { navigate('/blog'); };

return ( <> <h1>Título del post</h1> <button onClick={returnToBlog}>Volver al blog</button> </> ); }

Al pulsar el botón, el código ejecuta navigate('/blog') y la URL cambia sin necesidad de un enlace HTML. Puedes usarlo en cualquier evento: un onClick, un setTimeout, una validación de autenticación o un paywall después de 30 segundos de clase.

Cómo construir rutas dinámicas con navigate

La ruta no tiene que ser fija. Igual que en Link, puedes pasar un string dinámico usando template literals y concatenar variables:

jsx navigate(/blog/${post.slug});

Esto te permite enviar al usuario al detalle correcto según el dato disponible en ese momento, sin acoplarte a un componente visual.

Cómo volver atrás con navigate y el historial de navegación

Uno de los trucos más útiles es pasar un número en lugar de una ruta. Cuando llamas a navigate(-1), React Router te devuelve a la entrada anterior del historial, igual que la flecha atrás del navegador [7:30].

jsx const returnToBlog = () => { navigate(-1); };

El comportamiento depende de cómo llegó el usuario a la página actual. Si entró al blog desde el home y luego abrió un post, navigate(-1) lo regresa al home. Si entró directamente con la URL /blog/que-es-react, lo manda al estado anterior del historial, no necesariamente a /blog.

¿Cuándo conviene usar navigate(-1) en lugar de una ruta fija? Úsalo cuando quieras respetar el flujo del usuario, como un botón volver genérico. Si necesitas un destino predecible siempre, mejor pasa la ruta explícita como /blog.

Qué decisión tomar entre ruta fija y ruta del historial

Depende de la experiencia que busques:

• Si quieres consistencia y siempre llevar al usuario al mismo lugar, usa una ruta fija como navigate('/blog').
• Si prefieres replicar el botón de retroceso del navegador, usa navigate(-1).
• Si necesitas saltar varias páginas hacia atrás, prueba con -2, -3 o más, y observa cómo responde el historial.

Ese experimento con números negativos mayores queda como reto: ¿qué pasa si pones -4 y el historial no tiene tantas entradas?

Cuándo usar useNavigate en lugar del componente Link

Ambos cumplen el mismo objetivo final: cambiar de ruta. La diferencia está en el control. Link es declarativo y vive en el JSX, ideal para menús, listados y enlaces visibles. useNavigate es imperativo y vive en la lógica, ideal para casos como:

• Redirigir tras enviar un formulario.
• Forzar la salida si el usuario no está autenticado.
• Mover al usuario después de un temporizador.
• Encadenar navegación con otras acciones JavaScript.

Incluso puedes eliminar Link por completo en escenarios donde la navegación no debe ser un enlace clicable, sino la consecuencia de una regla de negocio.

Cuéntame en los comentarios qué pasó cuando probaste navigate(-2) o números mayores, y qué casos de tu proyecto resolverías con useNavigate en lugar de Link.