Después de configurar el enrutamiento básico, implementar la carga diferida y agregar componentes de reserva, el siguiente paso esencial es proporcionar a los usuarios los medios para navegar entre las páginas de nuestra aplicación.

React Router proporciona los componentes Link y NavLink, análogos a la etiqueta HTML a. Estos componentes nos permiten actualizar la URL en la barra de direcciones del navegador sin recargar toda la página.

import { Link } from "react-router-dom";

<Link to="path_value">Any text</Link>

• La propiedad to especifica la ruta o el camino de destino al que el enlace debe navegar. Reemplaza path_value con la ruta deseada;
• Any text es el contenido que se mostrará como el enlace. Puedes reemplazarlo por el texto o contenido JSX que desees.

Ejemplo

Creación de un componente separado llamado Bar para gestionar la navegación de toda la aplicación. Código de ejemplo:

const Bar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
      <hr />
    </nav>
  );
};

Este código define un componente funcional llamado Bar, que representa una barra de navegación. Renderiza un elemento <nav> que contiene una lista desordenada <ul> con tres elementos de lista <li>. Cada elemento de lista incluye un componente Link de la librería react-router-dom.

• Línea 6: El primer componente Link representa un enlace a la página "Home";
• Línea 9: El segundo componente Link representa un enlace a la página "About";
• Línea 12: El tercer componente Link representa un enlace a la página "Contacts".

Estos componentes Link permiten la navegación dentro de la aplicación actualizando la URL en la barra de direcciones del navegador sin recargar la página. Cuando un usuario hace clic en un enlace, se activa la ruta o el path correspondiente y se renderiza el componente asociado.