¿Qué es React Router?

Autor: | Última modificación: 20 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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?

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 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 empiece a correr desde cero con una memoria nueva.

¿Cómo funciona React Router?

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 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, 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 la 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.

¿Cómo continuar?

Ahora que sabes qué es y cómo funciona la librería React Router, 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!