Like por el Curso de optimización y debugging del render de componentes en React.js
Mientras tanto: Curso de Optimización Web
Fundamentos de navegación en la web
¿Cuándo necesitas React Router?
SSR vs. Single Page Applications
Versiones de React Router: ¿Por qué son tantas? ¿Cuál elegir?
Introducción a React Router DOM 6
Instalación de React Router DOM 6
BrowserRouter vs. HashRouter
Route: componentes de navegación
Link vs. NavLink
useParams: rutas dinámicas
useNavigate: historial de navegación
Outlet: nested routes
Fake authentication con React Router DOM 6
useAuth: login y logout
Menú con rutas públicas y privadas
Navigate y redirects: protegiendo rutas privadas
Roles y permisos
Reto: composición de componentes con navegación
Reto: UX de login y logout
Reto: roles complejos
React Router en TODO Machine
Integrando React Router a proyectos en React
Creando las rutas de TODO Machine
Botón de editar TODOs
Generador automático de IDs
Cambiando modales por navegación
Obtener y editar TODOs
useLocation: transferencia de datos por navegación
Deploy con React Router en GitHub Pages
Próximos pasos
Reto: página de búsquedas con navegación
Reto: TODO Machine con React Router DOM 5
Reto: PlatziMovies con React Router
Reto: crea tu propio React Router
Espera más cursos de React.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 8
Preguntas 0
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 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!
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>
);
}
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:
-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 historialGracias 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!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.