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

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

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

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