React Router Dom v6: ¿Qué ha cambiado?

Es natural esperar que las tecnologías sufran actualizaciones. Cada día que pasa, el conocimiento de la humanidad aumenta exponencialmente y, en consecuencia, algunas funcionalidades, frameworks, bibliotecas y demás se vuelven obsoletos, o al menos merecen una actualización. Eso es lo que sucedió con la herramienta más utilizada actualmente para la gestión de rutas en React: el React Router Dom, que ahora tiene una sexta versión. Con ella, ocurrieron algunos cambios dignos de mención, los cuales abordaremos en este artículo. Así que, si eras usuario de la quinta versión y tuviste dudas al utilizar la sexta, no te preocupes, hoy saldrás de aquí sabiendo todo lo necesario para desarrollar utilizando la versión más reciente del React Router Dom.

PD - Anteriormente, se publicó un artículo dirigido a la gestión de rutas con React, donde hicimos un paso a paso de cómo utilizar la quinta versión. Es muy interesante (en caso de que no conozcas ninguna de las dos versiones o quieras revisar la versión anterior) que le eches un vistazo y luego regreses aquí. Sin embargo, como ya se dijo, todo lo que necesitas para desarrollar con esta versión más reciente está aquí.

Antes que nada, ¿qué es React?

React es una biblioteca de JavaScript de código abierto utilizada por diversas empresas gigantes, como Facebook, Netflix, Instagram, etc. Enfocada en crear interfaces para el usuario de manera mucho más práctica que utilizando JavaScript puro, React ha ido ganando más y más espacio por ser de fácil asimilación, comprensión y adaptación.

Un breve resumen sobre React Router Dom

React Router Dom es una biblioteca para usar en React, donde es posible gestionar las rutas entre las páginas de un sitio web, siendo capaz de proporcionar alta escalabilidad y simplicidad. A través de ella, es posible renderizar componentes basados en la ruta que elija el usuario, además de manipular parámetros pasados vía URL.

Primeros Pasos

Una de las mayores verdades que llevo en la vida es que la mejor forma de aprender sobre algo es poniéndolo en práctica. De esta manera, te invito a crear un proyecto React conmigo, ejecutando el siguiente comando en el terminal:

npx create-react-app react-router-dom-6

cd react-router-dom-6

npm install react-router-dom

npm start

PD - Utilizamos aquí "npm" como herramienta de gestión de paquetes, pero elige la que prefieras, ya que no afectará nuestro desarrollo, siempre y cuando esté instalada correctamente. También es importante destacar que, en este ejemplo, estamos utilizando comandos que se ejecutan en el terminal de Linux. Para otros sistemas operativos, consulta la documentación do React. Por último, cabe señalar que el método de estilización de los elementos se hará en este ejemplo vía Tailwind, pero siéntete libre de utilizar cualquier forma que prefieras.

Si todo sale bien, al finalizar la ejecución de los comandos anteriores, se abrirá en el navegador una página con el símbolo de React:

PD - Entre los archivos que se crean dentro de la carpeta "src" de nuestro proyecto, solo es necesario mantener los archivos "App.css", "App.js", "index.css" e "index.js", ya que no abordaremos las funcionalidades que involucran los otros archivos. Bórralos, elimina las conexiones que tienen en estos archivos mencionados y limpia el archivo "App.js":

Ahora, llegó el momento de crear algunas páginas y consultas en nuestra aplicación, con el propósito de tener elementos suficientes para que la práctica tenga sentido. Primero, crearemos un archivo "services.js", donde se insertarán dos consultas a una API disponible de Mercado Libre:

También crearemos un repositorio dentro de "src" llamado "pages", donde crearemos tres páginas: "Home", "Catalog" y "Details":

Hecho esto, podemos comenzar a abordar los principales componentes de React Router Dom y lo que cambió de una versión a otra.

BrowserRouter

El BrowserRouter es el componente principal, responsable de hacer que todos los posteriores funcionen. Engloba toda la parte de nuestro código que utilizará rutas y, para este ejemplo, lo implementaremos de forma que englobe nuestro componente principal App.js:

Afortunadamente, la implementación de este componente no cambió entre las versiones 5 y 6 del React Router Dom. Dicho esto, ¡vamos adelante!

Routes

Para los que conocían la versión anterior, era responsabilidad de un componente llamado “Switch” acoplar en su contenido todas las rutas creadas. En la nueva versión, este componente fue reemplazado por Routes, pero este es el único gran cambio para este componente (o al menos el que necesitas saber para crear rutas efectivas con la sexta versión). El componente Router es responsable de recorrer todos los componentes “Route” que estén incluidos dentro de él, comparando la URL con alguna de las rutas, hasta encontrar una que sea equivalente.

Route

Sin duda, este es el componente que posee el mayor cambio. Veamos cómo lo utilizábamos en la quinta versión:

Con la sexta versión, ya no utilizamos más la propiedad “component”: esta fue sustituida por “element”. Además, entre corchetes, insertamos el componente completo, tal como si lo estuviéramos insertando en un retorno de función de React (“<Home />” en lugar de solo “Home”, como era en la versión cinco):

Redirect

Podemos utilizar el componente Redirect para redirigir una ruta a otra. Por ejemplo, imagina que deseas que, cuando el usuario acceda a la ruta raíz ‘/’, sea direccionado a la ruta “/vehicles”. En la quinta versión del React Router Dom lo haríamos de la siguiente forma:

Ahora, en la sexta versión, pasamos a utilizar el componente “Navigate” en lugar de “Redirect”, además de utilizar “replace to” en lugar de solo “to”. Veamos:

Link

El componente Link es muy importante para el desarrollo con React. Permite la navegación vía URL sin recargar la página, como es el caso del elemento “a”. De esta forma, no perderemos acciones temporales guardadas en estados al navegar entre las rutas de nuestra aplicación.

Afortunadamente, este componente tampoco sufrió cambios con la sexta versión. Lo utilizaremos para crear una navegación en las páginas Home y Catalog:

Manipulando parámetros de la URL

Haremos la consulta a la API en el componente “Catalog”. De esta forma, usaremos el useEffect de modo que se comporte como un “componentDidMount”, en términos de componentización por clases. Esto quiere decir que la función será la primera acción a ejecutarse cuando el componente se monte. En este useEffect, accederemos a los datos de la API y los guardaremos en un estado.

En lugar de la línea 17, haremos un map en el array “listVehicles”, de forma que se cree un elemento para cada ítem retornado por la API:

La idea es que, al hacer clic en uno de los elementos, el usuario sea dirigido a los detalles de este. En la quinta versión del React Router Dom, al importar el hook “useHistory”, asignábamos la llamada de esta función a una constante y, por último, en la función de clic del elemento, insertábamos la función “history.push(‘/direccion’)”. Ahora, con la llegada de la sexta versión, utilizamos el hook “useNavigate”. Además, ya no existe la necesidad de una función “push” para el redireccionamiento, pudiendo utilizar directamente la constante que almacena la llamada de este hook. Veamos:

¿Ves lo que hicimos en la línea 37 de la figura 16? Creamos un re direccionamiento a una página en la que, en su URL, hay un parámetro dinámico, de acuerdo con el id del elemento seleccionado. Crearemos entonces una ruta para definir que este elemento, que viene justo después de “details/”, es un parámetro:

Si te preguntas cuál es la necesidad de la creación de un parámetro para una ruta, es muy simple: podemos utilizar el parámetro pasado vía URL como medio de búsqueda para obtener más detalles de un determinado elemento, sin necesidad de trabajar con métodos avanzados de gestión de estados. En este caso, pasamos el id del artículo que está a la venta, dato que utilizaremos para hacer una nueva consulta a la API.

Para tener acceso a los parámetros creados en una ruta, utilizamos el hook “useParams”. Este nos devolverá un objeto con todos los parámetros existentes en la URL en cuestión:

Consideraciones Finales

En este artículo, hablamos sobre los principales cambios entre las versiones del React Router Dom. También puedes consultar la documentación para cualquier otra duda que haya quedado, o incluso puedes ponerte en contacto conmigo, ya sea por medio del correo electrónico bruno.cabral.silva2018@gmail.com o por mi perfil de Linkedin!

¡Te espero ansiosamente!