Una parte crucial en el proceso de desarrollar una aplicación web es definir cómo funcionará la navegación. Este proceso es lo que le da a nuestros proyectos fluidez en la experiencia de usuario. Por ello, aprender a definir rutas y renderizar nuestras páginas en función de ellas es fundamental. En este post, te enseñaremos para que sirve la librería React Router, una herramienta que simplificará el desarrollo de la navegación en nuestros proyectos.
¿Qué es la librería React Router?
La librería React Router, como todas las librerías en el mundo de la programación, es un conjunto de archivos escrito en un lenguaje de programación con un fin específico. Del mismo modo que hemos visto cómo la librería Axios para JavaScript o la librería Request para JavaScript facilitan el proceso de hacer llamadas HTTP, React Router también facilita ciertos procesos.
De manera específica, la librería React Router es un conjunto de archivos creados para facilitar la creación de rutas en nuestros proyectos. Es decir, ha creado una sintaxis determinada para que crear la navegación de una aplicación sea un proceso más fácil.
La librería React Router es una de las pocas librerías que usamos en React que no es del core de esta herramienta. Esto significa que es una librería auxiliar creada por terceros. Además, es la única librería que podemos considerar como estándar en el mundo del desarrollo web. Esto se da porque, aunque hay otras alternativas, utilizamos la librería React Router prácticamente en cualquier proyecto en el que manejemos URL desde cliente.
Para explorar más esta librería, te recomendamos visitar la página oficial reactrouter.com. A continuación, te explicaremos exactamente para qué sirve.
¿Para qué sirve la librería React Router?
Supongamos que tenemos un proyecto en el que hemos desarrollado y estilizado distintas páginas de una aplicación de redes sociales. En nuestro proyecto tenemos una página de login, una página de contenido y una página de creación. Ahora, necesitamos empezar a renderizar estas distintas páginas en función de la ruta o URL que tengan. Es decir, debemos programar qué página se va a mostrar en pantalla cuando el usuario acceda a determinada URL. Para ello, utilizamos la librería React Router.
La librería React Router sirve para crear una navegación por distintas URL en nuestra aplicación React. Sin embargo, no lo hace de cualquier modo. Como puedes leer en nuestros artículos sobre principios básicos de React y React declarativo y JSX, esta es una librería que se basa en un lenguaje declarativo y no imperativo. Es decir, con React no nos concentramos tanto en el cómo se hacen las cosas, sino en saber qué es lo que hace cada componente.
La librería React Router sigue la filosofía declarativa de React. Entonces, con esta librería vamos a manejar los cambios que se producen en la URL de nuestra aplicación de manera declarativa. Con esta estrategia, podemos poner enlaces de navegación e, incluso, crear redirecciones en el código sin la necesidad de hacer una petición nueva a nuestro servidor cada vez que modificamos el enlace.
Evitar las peticiones constantes a nuestro servidor es una manera de evitar las recargas de nuestra aplicación. En nuestros artículos sobre guardar login en React y recordar login en React, te hemos enseñado a tratar los datos que queremos guardar cuando el usuario efectúa una recarga.
Estas prácticas son necesarias porque, cada vez que recargamos nuestra aplicación, estamos pidiéndole al servidor que descargue de nuevo el código HTML de nuestro proyecto. Dentro de este HTML se encuentra nuestro archivo bundle.js, que es básicamente un resumen de nuestro código. Ya que este código empieza a leerse desde el archivo index.js, una recarga implica básicamente un reinicio de nuestra aplicación.
Entonces, la librería React Router nos permite crear rutas que se mantienen al nivel del navegador y no recurren al servidor para reiniciar nuestra aplicación. Para ello, la librería se apoya en el HTML api history, con el que podemos manipular el historial del navegador.
¿Quieres seguir aprendiendo?
Tras leer este post, sabes qué es y para qué sirve la librería React Router, ideal para la creación de rutas en cualquier aplicación web. Ahora, te invitamos a crear y estructurar tus propios proyectos de programación en nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva que combina la teoría con la práctica para convertirte en un experto del desarrollo web en pocos meses. ¡Anímate a seguir aprendiendo con nosotros y matricúlate ahora para darle un giro a tu perfil profesional!
