Desarrollar una aplicación web no solo implica crear y diseñar sus distintas páginas, también implica unir estas secciones en un flujo coherente al que llamamos navegación. En este post, te enseñaremos qué es y cómo funciona la librería React Router, una herramienta fundamental para definir la navegación por nuestra aplicación.
¿Qué es React Router?
¿Sabes qué es react? ¿Sabes qué es react router? React Router es una librería que se utiliza bastante con React y que nos facilita el proceso de definir las rutas de navegación dentro de nuestra aplicación. Al igual que el propio React, esta librería (react router) usa una metodología declarativa en vez de imperativa. Es decir, mantiene los principios básicos de React y escribe un código declarativo para manejar los cambios producidos en la URL.
La ventaja de usar React Router sobre otras maneras de crear rutas de navegación es que con ella podremos poner enlaces e incluso redirigir rutas sin hacer peticiones nuevas a nuestro servidor. Normalmente, cada vez que cambia nuestro enlace estamos llamando a nuestro servidor de nuevo, igual que sucede cuando hacemos una recarga. En nuestro post sobre guardar login en React, te explicamos que hacer un refresh es llamar de nuevo a nuestro servidor. Esto es una mala práctica, porque hace que se descargue de nuevo el HTML con el archivo bundle.js de nuestro código. Esto hará que nuestra aplicación de react router empiece a correr desde cero con una memoria nueva.
¿Cómo funciona React Router?
Si sabes qué es react, vamos a hablar de una de sus librerias. React Router mantiene las peticiones a nivel de navegador. Para ello, utiliza el html api history, un API de html5 con el que podemos manipular el historial del navegador. En términos básicos, lo que hace esta API es permitirnos añadir entradas a nuestro historial para que el usuario pueda navegar hacia atrás y hacia adelante.
Entonces, cuando dirigimos al usuario hacia un nuevo enlace, lo que realmente haremos es añadir una entrada en su historial. Esto quiere decir que proporciona una forma de navegar dentro del navegador, sin hacer llamadas a nuestro servidor o reiniciar nuestra aplicación.
Como toda librería de programación, React Router funciona por medio de una serie de archivos que nos facilitan determinada acción. Esta librería en particular nos da una serie de componentes mediante los que podemos hacer la navegación por las distintas URL de nuestra aplicación de modo declarativo.
¿Cómo instalar React Router?
En la página oficial reactrouter.com encontrarás un tutorial que te enseña exactamente cómo descargar esta poderosa librería y empezar a usarlas. Ahora, la librería de react router está en su versión 6.4. Si has descargado versiones anteriores, te invitamos a revisar la documentación de la página, donde puedes encontrar cómo actualizar esta librería a la nueva versión. Es importante que revises esto, pues hay elementos de las nuevas versiones que serán incompatibles con las anteriores.
Al instalar react-router-dom, estarás descargando una colección de componentes y de hooks. Estos hooks se inspiran en los hooks básicos de React como useEffect y useState, pero son propios de React Router. Estos elementos de navegación en cliente se integran de modo declarativo en una aplicación React.
Siguiendo un poco la filosofía de React, React Router separa su código en tres librerías, cada una para los distintos códigos core, React DOM y React Native. Para instalarlas, utilizamos las siguientes líneas de código en nuestra consola:
- npm install –save react-router
- npm install –save react-router-dom
- npm install –save react-router-native
Al igual que con React, deberás instalar react-router-dom o cualquier otra librería que más te funcione. Te recordamos que React es la librería base, mientras que React DOM se especializa en aplicaciones web y React Native se especializa en aplicaciones móviles. Ten presente que, si instalas react-router-dom, ya tendrás instalado el código básico de react-router.
Ahora que sabes qué es y cómo funciona la librería React Router, además de como instalar react-router-dom, te invitamos a utilizarla en tus propios proyectos de programación para darle fluidez a tu navegación. Para seguir aprendiendo a desarrollar, no solo con React sino también con lenguajes como JavaScript, HTML o CSS, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde te convertirás en un experto del desarrollo web en pocos meses. ¿A qué esperas para inscribirte? ¡Hazlo ya y mejora tu vida laboral!
