React Navigation from scratch
La mayoría de las aplicaciones React usan React-Router para la navegación. React-Router tiene frecuentes cambios de última hora. Pero lo que más nos importa es aprender sobre la teoría y las ideas de navegación. En este caso, no vamos a usar React-Router, vamos a analizar en un proyecto algunas cosas de navegación desde cero y comprender algunas de las ideas y la teoría de la navegación.
Project repository:
Aquí podemos ver el menú de navegación y las rutas asociadas.
Building a Reusable Route Component.
window.location es un objeto creado en nuestro navegador. Este objeto se actualizará automáticamente cada vez que navegue a una URL diferente.
En este componente, podemos comenzar activando un detector de eventos. Vamos a estar a la escucha de un evento de tipo «popstate» y cada vez que ocurra, queremos ejecutar una función que llamaremos «onLocationChange». Cada vez que se llama a esta función, tenemos que decirle al componente «Route» que se actualice o renderice.
const onLocationChange = () => {setCurrentPath(window.location.pathname);};window.addEventListener(‘popstate’, onLocationChange);
Implementing a Header for Navigation
En lugar de usar «anchor elements«, creamos un componente llamado Link que modificará el comportamiento de los «anchor elements».
En una aplicación web normal, cualquier tipo de aplicación web tradicional consiste en una variedad de documentos HTML diferentes, tu puedes navegar por sus páginas web con tu navegador. Cada vez que navegas a una página, tu navegador realiza una solicitud a algún servidor y este devuelve un documento HTML y sus archivos JavasScript y CSS.
Cada vez que un usuario hace clic en un enlace, su navegador realiza una solicitud completamente diferente a otro servidor y obtiene otro documento HTML y sus archivos JavaScript y CSS. Así es como una página web tradicional maneja la navegación. Con los enlaces normales, cada vez que hacemos click en uno de ellos se cargará otro documento HTML.
Este comportamiento no es el ideal en una aplicación React. Cuando llegamos por primera vez a nuestra aplicación, cargamos nuestro archivo index.js, el documento HTML, todo el JavaScript y todo el CSS. No hay ninguna razón, en una aplicación React, para que hagamos una recarga completa de la página y recarguemos todos estos activos diferentes. En cambio, sería realmente ideal si pudiéramos hacer clic en estos enlaces, actualizar la URL pero no hacer una recarga de página completa. Una recarga de página completa genera una gran cantidad de tráfico de red que no es necesario solo para cambiar algunos contenidos muy básicos en la pantalla.
Building a Link
Dentro del componente «Header», vamos a crear un nuevo tipo de componente llamado «Link». Este componente solo mostrará un enlace en la pantalla que será un elemento HTML Anchor normal. Pero vamos a adjuntar a este elemento un manejador de eventos de tipo «on click» que ejecutará una lógica muy especial cada vez que un usuario haga clic en él.
Cada vez que un usuario haga clic en uno de esos enlaces, crearemos un evento de navegación. Este será un objeto que comunicará al resto de nuestra aplicación que la URL acaba de cambiar. Este evento de navegación luego se enviará a todos los diferentes componentes de Route dentro de nuestra aplicación. Cuando reciban este evento de navegación, sabrán que el mundo acaba de cambiar.
Entonces, para cambiar la URL, pero no refrescar la página completamente, usaremos una función que está integrada directamente en el navegador:
window.history.pushState({}, », href);
const navEvent = new PopStateEvent(‘popstate’);window.dispatchEvent(navEvent);
Por otro lado, siempre que un usuario vea un enlace, debería poder presionar la tecla de comando en su teclado si está en Mac OS y hacer clic en él, o presionar la tecla de control si está en Windows y hacer clic en él. En cualquier caso, ese enlace debe abrirse en una nueva pestaña. Para preservar este comportamiento, antes de deshabilitar el comportamiento predeterminado del elemento HTML Anchor y aplicar nuestra lógica, podemos verificar que estas teclas hayan sido presionadas y en caso afirmativo permitir su funcionamiento por defecto.
if (event.metaKey || event.ctrlKey) {return;}event.preventDefault();
Dejar un comentario
¿Quieres unirte a la conversación?Siéntete libre de contribuir!