Enrutamiento Dinámico y Navegación Programática en React Router

Aprender a implementar enrutamiento dinámico y navegación programática es clave para crear aplicaciones React efectivas y bien estructuradas. A continuación, se presentan los pasos y detalles esenciales para configurar estos dos conceptos usando React Router.

¿Qué es el enrutamiento dinámico?

El enrutamiento dinámico permite configurar rutas que acepten parámetros, como un ID o nombre de usuario, para mostrar contenido específico. Por ejemplo:

• Supongamos que queremos ver el perfil de un usuario. Podemos crear una ruta como /users/:id donde :id es el parámetro dinámico que representa el ID del usuario.
• En lugar de tener múltiples rutas (product/1, product/2, etc.), configuramos una sola ruta como product/:id que cargará el componente del producto basándose en el valor del ID pasado en la URL.

Implementación en React Router

1. En el archivo de rutas, configuramos una ruta dinámica:

   "product/:id" component={Product} />
   

2. En el componente Product, utilizamos el hook useParams para capturar el ID desde la URL:

   const { id } = useParams();
   

3. Este id se utiliza luego para obtener y mostrar la información específica del producto.

¿Qué es la navegación programática?

La navegación programática permite cambiar de vista mediante código sin necesidad de un enlace visible. Esto es útil para casos como redirecciones automáticas tras una acción del usuario (como enviar un formulario).

Implementación en React Router

1. Usamos el hook useNavigate para obtener una función de navegación:

   const navigate = useNavigate();
   

2. Creamos una función que utilice este hook para redirigir al usuario, por ejemplo, a la vista About:

   const goToAbout = () => navigate('/about');
   

3. Asignamos esta función a un botón o evento específico para que se ejecute cuando sea necesario.

¿Cómo se organizan los componentes y enlaces?

Para estructurar los componentes y enlaces en la interfaz:

• Creamos una carpeta de components y colocamos en ella los archivos de cada vista (Home, About, Product).
• En App, configuramos los enlaces en una barra de navegación, como:

  Home
  About
  Product 1
  Product 2
  

• Para una mejor organización visual, cada enlace se envuelve en etiquetas li dentro de una lista ul.

¿Cómo se configuran los estilos de navegación?

• Modificamos index.css para personalizar los estilos, separando adecuadamente los elementos de la barra de navegación para una experiencia de usuario más clara y ordenada.