React Router es una herramienta fundamental a la hora de declarar rutas de manera declarativa en React. Para ello, esta herramienta utiliza una serie de elementos inspirados en los componentes de React. Con ellos, podemos ejecutar todo tipo de acciones, desde crear rutas hasta redirigirlas y anidarlas. En este post, te enseñaremos cuáles son los componentes principales de React Router en su versión 6 y cómo funcionan.
¿Qué son los componentes principales de React Router?
Los componentes principales de React Router son la parte más importante de la sintaxis de esta librería. Como puedes leer en nuestros posts sobre qué es React Router y navegación estática y navegación dinámica, React Router es una librería que nos facilita el desarrollo de la navegación por nuestras aplicaciones de un modo declarativo. Es decir, sigue la filosofía de React y evita el código imperativo. Además, nos permite crear una navegación dinámica por medio de componentes que facilitan la edición de rutas en el momento de ejecución. A continuación, te presentamos dichos componentes.
¿Cuáles son los componentes principales de React Router?
Existen cinco componentes principales de React Router en su versión 6. A continuación, te explicamos exactamente cuáles son y cómo funcionan frente a los componentes de la versión 5.
BrowserRouter
El componente BrowserRouter es el más importante dentro de los componentes principales de React Router. Es el componente central dentro de esta librería, pues envuelve toda la aplicación y lo hace todo por nosotros. Este componente es el que establece la comunicación con la API history de HTML para saber datos como en qué ruta estamos y a dónde tiene que ir, entre otros.
La API history de HTML nos permite modificar el historial de navegador. Es decir, cuando añadimos un nuevo enlace en nuestra aplicación, lo que estamos haciendo realmente es añadir una página en el historial del usuario. Para conocer más sobre esta API, te recomendamos leer el post Manipulando el historial del navegador en la MDN.
Dentro de los componentes principales de React Router existen una serie de componentes que nos permiten hacer navegaciones.
Es decir, utilizaremos los componentes link y navlink en vez de utilizar el elemento a con el href de HTML. Aunque el elemento a de HTML funciona para crear navegaciones, este elemento siempre fuerza una navegación hacia el servidor mediante el href. Este es un problema porque, como lo mencionamos en nuestro post sobre para qué sirve la librería React Router, queremos mantener una navegación a nivel de cliente o de navegador.
El componente Link es prácticamente lo mismo que NavLink, solo tienen una pequeña diferencia. Para conocer más sobre estos dos componentes, te invitamos a leer nuestros posts sobre componentes link y navlink en React Router y cómo usar navlink en React Router.
El componente navigate produce una redirección declarativa de nuestras rutas. Es decir, llevaremos un enlace creado por link y navlink hacia una página diferente cuando se ejecute determinada acción. Un ejemplo de esto es cuando cambiamos la página renderizada una vez un usuario ha iniciado sesión.
Route
Dentro de los componentes principales de React Router, el componente route es el responsable de renderizar un componente en función de la ruta URL que tengamos en nuestro navegador. Esto significa que con Route podemos definir qué página de nuestra aplicación se renderiza según la URL que definamos. Cuando la URL no hace match con ningún componente, se renderizará null.
Routes, Outlet
El componente Routes es básicamente un agrupador de rutas. Con él, podemos definir varios componentes Route y se renderizará el primero que haga match con la URL que está presente en el navegador.
Por su parte, el componente outlet nos permite anidar rutas dentro de otras. El componente outlet también nos permite establecer un espacio o un slot dentro de un componente donde renderizaremos el resultado de una ruta.
¿Quieres seguir aprendiendo?
Ahora que sabes cuáles son los componentes principales de React Router, ¡es momento de utilizarlos en tus aplicaciones de React! Si quieres seguir aprendiendo sobre las posibilidades de esta y otras herramientas de programación para la web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un espacio en el que aprenderás a desarrollar con herramientas y lenguajes como JavaScript, webPack, HTML, CSS y JSX. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya!
