Uso de useNavigate en React Router DOM para navegación dinámica

Clase 9 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Cómo utilizar el hook useNavigate de React Router DOM?

El uso de herramientas modernas de navegación en React es imprescindible para facilitar el desarrollo de aplicaciones web y mejorar la experiencia del usuario. Uno de los más importantes en React Router DOM es el hook useNavigate, que permite redirigir y cambiar rutas dentro de nuestra aplicación de forma programática.

¿Qué es y cómo solucionamos el problema de las keys en React?

Antes de profundizar en el uso de useNavigate, debemos resolver un error común relacionado con las keys en listas renderizadas. Este problema ocurre cuando olvidamos asignar una propiedad key a cada elemento dentro de un array. React utiliza esta propiedad única para identificar elementos y optimizar la actualización del DOM.

Solución para blog page:
```
<BlogLink key={post.slug} />
```
Aquí, post.slug se utiliza como la key única para cada entrada de blog.
Solución para el menú:
```
<li key={route.to} />
```
Cada elemento de la lista tiene ahora una key basada en route.to.

¿Cómo navegar entre rutas con useNavigate?

A continuación, se explica cómo implementar la navegación de manera eficiente utilizando useNavigate.

Crear un botón para navegar:

const returnToBlog = () => {
  navigate('/ruta-deseada');
};

<button onClick={returnToBlog}>Volver al blog</button>

Este botón ejecuta returnToBlog, que utiliza useNavigate para redirigir al usuario.

Importante: El useNavigate debe ser llamado directamente en el cuerpo de un componente, siguiendo las reglas generales de los hooks.

¿Qué ventajas aporta useNavigate sobre Link?

La principal diferencia entre el uso de useNavigate y un componente Link radica en su flexibilidad y dinamismo:

Rutas dinámicas: Al usar expresiones como templates literales, useNavigate permite rutas dinámicas a partir de variables.
Historial de navegaciones: useNavigate permite navegar usando un índice relativo, como navigate(-1), que lleva al usuario a la página previa en el historial de navegación.

¿Cómo gestionar el historial de navegación?

Usar navigate(-1) es una herramienta valiosa para manejar el historial. Esta técnica:

Historia redireccionada: El método navigate(-1) simula el comportamiento del botón "Atrás" del navegador.
Prueba con otros índices: Se invita a los usuarios a experimentar con valores como navigate(-2) o navigate(-3) para moverse varias páginas atrás en el historial.

¿Cuándo intentar implementar funciones temporales?

Un enfoque poderoso de useNavigate es usarse en lógica condicional o temporal:

Validaciones temporales: Como redireccionar después de un tiempo límite, validaciones de sesión o restricciones de contenido.

Con estos conceptos, el useNavigate permite una implementación robusta y flexible de navegación en React, extendiendo las capacidades de diseño y mejorando el flujo de las interacciones de usuario en aplicaciones.

Samuel Miranda Martínez

student•

Like por el Curso de optimización y debugging del render de componentes en React.js

Mientras tanto: Curso de Optimización Web

Ismael Cruz Procel

student•

Seguimos esperando ese curso @Platzi

Fidel Parabacuto

student•

Si deseas que el usuario no pueda volver a la pantalla anterior, usas replace true para crear un nuevo historial de navegación a partir de la nueva ruta.

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

Esto me parece útil para el registro, login y logout. Imagina que estás en los 2000, en un cybercafé, cierras tu sesión y te vas, luego llega otra persona le da "atrás" y tenga acceso a tu cuenta !

Juan David Reyes

student•

Muy interesante :o

milton coronado

student•

genial! ahora busca la forma de regresar a los 2000...

Andrés Esteban Rodríguez Jiménez

student•

useNavigate: historial de navegación

useNavigate es un React Hook que es similar a los componentes de Link o NavLink, per en vez de llevarnos a una ruta automáticamente por medio de un click, nos permite que con JavaScript cambiemos esta URL y nos movamos a una nueva ruta, podemos hacerlo con un evento clic o el evento que deseemos. Veamos como hacerlo!

Recordatorio

Recordemos que cada componente que use los slugs debe tener un identificador propio, este se guardará en la propiedad key={} y el identificador será la propia ruta a la que accede el componente.

BlogPage.js

function BlogPage() {
  return (
    <>
      <ul>
        {blogdata.map( post => (
          <BlogLink 
						key={post.slug} // <--
						post={post} />
        ))}
      </ul>
    </>
  );
}

Menu.js

function Menu() {
  return (
    <nav>
      <ul>
        {routes.map(route => (
          <li key={route.to}> // <--
            ...
          </li>
        ))}
      </ul>
    </nav>
  );
}

Usar el historial de navegación

Vamos a crear un botón que nos permita retroceder a la sección de blog al momento que nosotros le demos a uno de los artículos, ósea pasaremos de la vista de BlogPost a la vista de BlogPage .

Para esto vamos a hacer parte de la maquetación del componente BlogPost un botón que se llame “Volver al blog”.

// Importamos el useNavigate
import { useNavigate, useParams } from 'react-router-dom';
...

function BlogPost() {
  // Creamos una variable que nos permita usar este Hook
  const navigate = useNavigate();
	...

  /* En esta función haremos uso del useNavigate para volver al 
	BlogPage */
  const returnToBlog = () => {
    /* Aquí la utilizamos como una función y le indicamos la ruta 
		hacia donde queremos navegar */ 
    navigate('/blog');
  }
  
  return (
    <>
      ...
      <button
        // Llamamos a una función que nos permita usar el Hook 
        onClick={returnToBlog}
      >Volver al blog</button>
      ...
    </>
  );
}

¿Fue demasiado sencillo verdad? Seguro te preguntarás que diferencia tiene un un Link o un NavLink. Veámoslas:

Se puede establecer con rutas dinámicas como NavLink
Se pueden usar valores especiales como -1 o -2 o -n, que nos devolvería una página hacia atrás o demás valores para retroceder incluso más o ir hacia delante si es que esta guardado en el historial

Gracias a esto no vamos a depender de enlaces en HTML sino que tendremos nuestra propia navegación optimizada y personalizada.

Max Andy Diaz Neyra

student•

Excelente resumen!, Solo una precision en la parte "Recordatorio Recordemos que cada componente que use los slugs debe tener un identificador propio, este se guardará en la propiedad key={} y el identificador será la propia ruta a la que accede el componente." en realidad el key se utiliza a la hora de renderizar una lista y cada hijo de la lista debe tener un key unico.

David Prado

student•

UN HACK RAPIDO para solucionar ese molesto Warning que nos aparece en consola! . El método .map() tiene un segundo argumento que hace referencia al índice del elemento que itera . Esto es muy útil para solucionar el problema de key única! . . Un ejemplo de como utilizarlo es pansandole el index a key en BlogPage:

function BlogPage() {
    return (
    <>
        <h2>Blog Page</h2>

        <ul>
            {blogdata.map( (post, index) => (
                <BlogLink key={index} post={post} />
            ))}
        </ul>
    </>
    );
}

Pero también podríamos utilizar en cualquier otro lugar donde utilicemos el método .map() para generar una key única, como por ejemplo en Menu:

function Menu() {
return (
    <nav>
    <ul>
        {routes.map((route,index) => (
            <li key ={index}>
                <NavLink
                    to = {route.path}
                    end
                    style={({ isActive }) => ({
                    color: isActive ? 'green' : 'red'
                    })}
                >
                    {route.text}
                </NavLink>
            </li>
        ))}
    </ul>
    </nav>
);
}

Juan Castro

teacher•

Usar el index como key puede dar problemas a largo plazo. No es un mal hack. Pro hay qu tener cuidado porque a React no le funciona tan bien. Mi idea es tocar el tema a profundidad en un curso de optimización de render. En fin. En la próxima clas lo solucionamos de otra forma no te preocupes. :D

Diana Florez

student•

Creo q si se utiliza el index como key, ya q es un numero puede ser que este index se repita para utilizarlo en otro lugar

Diana Florez

student•

Me parece genial porque se nota que el profe ama hacer esto y su explicación es muy clara ... gracias JuanDC

Gualberto Montiel

student•

Muy bien el hack de -1 para hacer que la navegacion regrese, en general muy buen curso!

JOSE RANGEL

student•

Aunque no se mencionó, es importante recalcar que tanto el componente Link como el useNavigate, nos permiten 'enviar' información (lo que sea) y ser consumido directamente en la nueva ruta. . Por ejemplo, en el listado de los post, al hacer clic sobre cada uno de ellos, puedes ir a la otra ruta y con lo enviado a través del estado consumir directamente el post sin necesidad de hacer la validación de cuál post es de acuerdo al parámetro o hacer la petición a la API si fuere el caso. . Esto es super potente porque nos ayuda a mejorar los tiempos de espera de cara al usuario. . PD: Esto se logra con la funcionalidad de useLocation que viene más adelante en el curso 😎😎

JUAN JOSE HERNANDEZ MUÑOZ

student•

Ejemplos de uso:

Un click para volver atras o ir a alguna seccion
Un temporizador para moderar el tiempo de uso
Un temporizador que verifique autenticacion

Harold Zurita Simon

student•

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.

JUAN JOSE HERNANDEZ MUÑOZ

student•

Hola muchachos, les comparto las notas que tome de esta clase. Son un mix de notas mias y comentarios de otros companeros.

HISTORIAL DE NAVEGACION y useNavigate

const navigate = useNavigate()

Usando esta variable creada con el hook podemos:

Ir a rutas especificas navigate('/blog')
Devolvernos a la ruta anterior navigate(-1)
Acceder dinamicamente a las rutas usando template literals
Manejar una especie de registro o historial de navegacion
Asi como LINK podemos enviar informacion y que esta sea consumida en la nueva ruta

Diego Reyes Cabrera

student•

Documentación de useNavigate https://reactrouter.com/en/main/hooks/use-navigate

JUAN JOSE HERNANDEZ MUÑOZ

student•

useNavigate

Nos permite un tipo de navegacion usando JavaScript para que mediante su logica, eventos y condicionales permitamos la navegacion al usuario.

Jose Luis Bedoya

student•

Brutal! Es como un arreglo con las direcciones :0

Valentina Hernández

student•

Justo la Key del Menú la aregle gracias a un compañero pero no recuerdo su nombre, justo cuando se hace el menú idicaba que le gustaba usar un ID, asi que segui su consejo :

Daniel Morales

student•

Entiendo que con el navigate(-1), quiere decir que vamos a regresar a la última ruta.

Daniel Morales

student•

A mi me gusta poner la key con el index de cada elemento.

{
  blogdata.map((post, i) => (
  <BlogLink key={i} post={post} />
)}

Juan Castro

teacher•

Puede ser un problema, Dani, mira: https://platzi.com/blog/react-keys/

Oscar Enrique Machado Quintana

student•

No sabía lo de -1, me encantó eso, muy bueno.

Johangly Sucre

student•

En proximas versiones de react router si pones 100 en el navigate vas a poder comunicarte con el futuro y alterarlo como gustes.

Sebastian Carballo

student•

English repo version https://github.com/SebaMat3/react-router-course-p1/tree/feat/add-navigation-hook

Branch name:

feat/add-navigation-hook

Commit message:

git commit -m "feat: add React Router navigation functionality

- Implement useNavigate hook for blog navigation

- Add return-to-blog button functionality

- Improve user navigation flow between blog posts and main blog page"

Frank Alberto Broche Gómez

student•

Porfa Profe haganos un Curso de optimización y debugging del render de componentes en React.js 🤩