useNavigate: historial de navegación

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

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

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

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.