No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Prep谩rate para tu pr贸ximo empleo comprando hoy a precio especial

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

7 D铆as
20 Hrs
27 Min
36 Seg

useNavigate: historial de navegaci贸n

9/30
Recursos

Aportes 17

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 鈥渁tr谩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 鈥淰olver 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 funcin 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.

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

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

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 鈥榚nviar鈥 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 馃槑馃槑

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.

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

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.