useNavigate para navegar con JavaScript

Curso de React.js: Navegación con React Router

Contenido del curso

No sé dónde empezar

Fundamentos de navegación en la web

Introducción a React Router DOM 6

Fake authentication con React Router DOM 6

React Router en TODO Machine

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:56

useNavigate para navegar con JavaScript

Curso de React.js: Navegación con React Router

Clase 9 de 30

Clase 9 / 30

Recursos

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.

Harold Zurita Simon

Hace 2 años

useNavigate: historial de navegación

. El react hook useNavigate tiene un parecido con el componente Link y NavLink. Sin embargo, este nos permite navegar manualmente con código Javascript. . Antes de avanzar con el nuevo hook, vamos a arreglar el warning pendiente que se tenía. . En BlogPage bastará con añadir un key para cada BlogLink que rendericemos, utilizando el slug. Mientras que en Menu vamos a utilizar a to para la propiedad key. .

<ul>
	{blogdata.map(post => (
		<BlogLink key={post.slug} post={post} />
	))}
</ul>

<ul>
	{routes.map(route => (
		<li key={route.to}>
		  <NavLink
		    style={({ isActive }) => ({
		      color: isActive ? 'red' : 'blue',
	      })}
	      to={route.to}
		  >
	      {route.text}
      </NavLink>
    </li>
	...
</ul>

. Vamos a crear un botón que por medio de un onClick nos permita cambiar de ruta utilizando el hook useNavigate. .

import React from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { blogdata } from './blogdata'

function BlogPost() {
  const navigate = useNavigate();
  const { slug } = useParams();

  const blogpost = blogdata.find(post => post.slug === slug);

  const returnToBlog = () => {
    navigate('/blog');
  };
  
  return (
    <>
      <h3>{blogpost.title}</h3>
      <button onClick={returnToBlog}>Volver al blog</button>
      <p>{blogpost.author}</p>
      <p>{blogpost.content}</p>
    </>
  );
}

export { BlogPost };

. Recordemos que al utilizar un hook no podemos envolver su llamado dentro de un condicional, o de una función. Sino que tenemos que llamarlos tal cual en el render del componente, dentro del componente antes del return. . Asignamos a una variable el llamado al hook. Luego podemos utilizar esta variable como una función y llamarla desde nuestra función returnToBlog. . Al utilizar este hook podemos especificar una ruta, incluso rutas dinámicas. Sin embargo, otra diferencia que tiene respecto de Link es que también podemos navegar hacia atrás pasándole el argumento -1. . En el contexto de useNavigate, los números que puedes usar como argumentos son relativos al historial de navegación de tu aplicación. .

navigate(1): Navega una página hacia adelante en el historial.
navigate(-1): Navega una página hacia atrás en el historial.
navigate(2): Navega dos páginas hacia adelante en el historial.
navigate(-2): Navega dos páginas hacia atrás en el historial.
Y así sucesivamente, dependiendo de cuántas páginas en el historial deseas avanzar o retroceder.

. Si llamas a navigate(0) usando useNavigate, lo que sucede es que la navegación se refrescará, es decir, la ruta actual se volverá a cargar. Esto puede ser útil en situaciones donde deseas forzar una actualización de la vista sin realmente navegar a una nueva página. . Incluso se puede utilizar, navigate('/alguna-ruta', { replace: true }) para navegar a la ruta especificada de tu aplicación y reemplazar la entrada actual en el historial de navegación, en lugar de agregar una nueva entrada. Esto puede ser útil en situaciones donde no deseas que el usuario pueda retroceder a la página anterior en el historial después de realizar cierta acción.

Comentarios (24)24 comentarios

Samuel Miranda Martínez

Hace 4 años

Ismael Cruz Procel

Hace un año

Fidel Parabacuto

Juan David Reyes

milton coronado

Andrés Esteban Rodríguez Jiménez

Max Andy Diaz Neyra

Hace 3 años

David Prado

Juan Castro

Profesor

Diana Florez

Gualberto Montiel

JOSE RANGEL

JUAN JOSE HERNANDEZ MUÑOZ

Diego Reyes Cabrera

Jose Luis Bedoya

Valentina Llorente Hernández

Daniel Morales

Oscar Enrique Machado Quintana

Johangly Sucre

Jesus Anguiano Solano

Hace 8 meses

Juan Diego Mejia Maestre

Hace 10 meses

Fundamentos de navegación en la web

Cuándo y por qué usar React Router

SSR vs SPA: cómo funciona cada una

Uso de React Router DOM 6 en Proyectos React

Introducción a React Router DOM 6

Instalar React Router Dom 6 paso a paso

Browser Router vs Hash Router en GitHub Pages

Primeras rutas con React Router Dom 6

Link y NavLink para navegación en React

Rutas dinámicas con React Router DOM y useParams

useNavigate para navegar con JavaScript

Outlet y rutas anidadas en React Router

Fake authentication con React Router DOM 6

Rutas privadas con fake auth en React

Rutas privadas y públicas en React

Rutas protegidas con Navigate en React

Roles y permisos en aplicaciones web: Autenticación y autorización

Retos avanzados en React: manejo de estado y composición de componentes

Redirect al login con useLocation en React

Rutas dinámicas con roles de usuario

React Router en TODO Machine

Cómo migrar React portals a rutas reales

Estructura de carpetas con React Router Dom 6

Botón de editar todos con React y SVG

Generación de IDs únicos para gestionar tareas en React

Migrar modales a rutas con useNavigate

Cómo funciona editTodo con useParams

Texto por defecto en textarea con useLocation

Implementación de React Router en Proyectos Legacy

Próximos pasos

Sincronizar el buscador con la URL

Migrando a React Router Dom 5 en proyectos reales

Migra Platzi Movies de JS a React

Clonar React Router desde cero

Navegación Avanzada con React Router DOM 6

useNavigate para navegar con JavaScript