No tienes acceso a esta clase

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

useNavigate: historial de navegaci贸n

9/30
Recursos

Aportes 8

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸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 鈥渁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.

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

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