No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

useNavigate: historial de navegación

9/30
Recursos

¿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.

Aportes 20

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

Mientras tanto: Curso de Optimización Web

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 !

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.

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 (
    <>
        <h1>Blog Page</h1>

        <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>
);
}

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

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

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 😎😎

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

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 (
    <>
      <h2>{blogpost.title}</h2>
      <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.

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

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.
.
Para utilizarlo creamos un llamado al hook con una variable que termina siendo la funcion que va a recibir nuestros parametros
.

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

useNavigate

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

Brutal! Es como un arreglo con las direcciones :0

Entiendo que con el navigate(-1), quiere decir que vamos a regresar a la última ruta.
A mi me gusta poner la key con el index de cada elemento. ```js { blogdata.map((post, i) => ( <BlogLink key={i} post={post} /> )} ```

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

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

**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"
Porfa Profe haganos un Curso de optimización y debugging del render de componentes en React.js 🤩
esto esta padre, una de las formas mas usuales de hacerle paginacion a una api es justo por medio de queryparamas en las url de la navegacion, para en los componentes tener los filtros y valores de paginado que luego van como parametros de los servicios.