Dopo aver configurato il routing di base, implementato il caricamento lazy e aggiunto componenti di fallback, il passo successivo essenziale è fornire agli utenti i mezzi per navigare tra le pagine dell'applicazione.

React Router mette a disposizione i componenti Link e NavLink, analoghi al tag HTML a. Questi componenti consentono di aggiornare l'URL nella barra degli indirizzi del browser senza ricaricare l'intera pagina.

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

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

• La prop to specifica la route o il percorso di destinazione a cui il link deve portare. Sostituire path_value con il percorso desiderato;
• Any text è il contenuto che verrà visualizzato come link. È possibile sostituirlo con il testo o il contenuto JSX desiderato.

Esempio

Creiamo un componente separato chiamato Bar per gestire la navigazione dell'intera applicazione. Ecco il codice:

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>
  );
};

Questo codice definisce un componente funzionale chiamato Bar, che rappresenta una barra di navigazione. Viene renderizzato un elemento <nav> contenente una lista non ordinata <ul> con tre elementi di lista <li>. Ogni elemento di lista include un componente Link dalla libreria react-router-dom.

• Riga 6: Il primo componente Link rappresenta un collegamento alla pagina "Home";
• Riga 9: Il secondo componente Link rappresenta un collegamento alla pagina "About";
• Riga 12: Il terzo componente Link rappresenta un collegamento alla pagina "Contacts".

Questi componenti Link consentono la navigazione all'interno dell'applicazione aggiornando l'URL nella barra degli indirizzi del browser senza ricaricare la pagina. Quando un utente clicca su un collegamento, viene attivata la relativa route o percorso e il componente associato verrà renderizzato.