Uso de React Router DOM 6 en Proyectos React

¿Por qué hay tantas versiones de React Router?

React Router ha existido en varias formas a lo largo de los años, lo que ha llevado a muchas versiones. No se trata solo de actualizaciones regulares de una herramienta, sino que ha habido diferentes proyectos y repositorios de React Router. Los primeros ya no se mantienen, están archivados en GitHub como parte de la historia de desarrollo. Sin embargo, React Router DOM surgió posteriormente y sigue siendo el que se usa principalmente hoy en día.

• React Router DOM: Ha tenido varias versiones, siendo las más conocidas la 4, la 5 y la 6.
• React Router: En algún momento, los creadores originales se separaron y uno de ellos creó una versión con mejoras en accesibilidad y usabilidad. Sin embargo, después se reunieron y actualmente utilizamos React Router DOM 6.

La estructura permanece similar entre versiones, lo que facilita la migración entre diferentes versiones o incluso otros React Routers.

¿Cuál es la estructura general de un React Router?

La estructura básica de un React Router implica varios componentes y conceptos que se repiten en sus versiones, lo cual es fundamental para comprender cómo funciona.

• Provider: Funciona muy parecido a React Context. Permite comunicar propiedades, estados y actualizadores de estado entre componentes sin Prop Drilling.
• Link: En lugar de etiquetas <a>, se utiliza un componente Link que proviene de la dependencia React Router.
• Route: Define las rutas de la aplicación. Utilizando las propiedades path y render (o similar), se determina qué componentes deben renderizarse en cada ruta.

Además, los Routers suelen permitir la inclusión de un Menú o Footer que se renderice en todas las vistas, asegurando una composición constante en la estructura de la aplicación.

¿Cómo se integran los React Routers en las aplicaciones?

La práctica de integrar un React Router puede variar ligeramente, sin embargo, los conceptos básicos son los mismos al usar el enfoque de Create React App.

1. Instalación: Primero se debe instalar la versión deseada del React Router, en este curso se usa React Router DOM 6.
2. Configuración: Se configura el Provider y se definen las rutas a través de los componentes específicos como Route y Link.
3. Tipos de Routers: Cada React Router suele tener diferentes tipos de routers:
   • Para Server Side Rendering.
   • Para Single Page Applications con Client Side Rendering.

Es esencial elegir el tipo adecuado según las necesidades del proyecto, lo que permite manejar adecuadamente la navegación y el renderizado de la aplicación. En el siguiente paso se aprenderá cómo instalar React Router DOM 6 en un proyecto de Create React App y las diferencias entre los tipos de routers. Esto proporcionará una base sólida para manejar la API y los componentes en proyectos React.