Perusreitityksen määrittämisen, laiskan latauksen toteuttamisen ja varakomponenttien lisäämisen jälkeen seuraava olennainen vaihe on tarjota käyttäjille mahdollisuus siirtyä sovelluksen eri sivujen välillä.

React Router tarjoaa Link- ja NavLink-komponentit, jotka vastaavat HTML:n a-tagia. Näiden komponenttien avulla voimme päivittää selaimen osoiterivin URL-osoitteen ilman koko sivun uudelleenlatausta.

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

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

• to-prop määrittää kohdereitin tai polun, johon linkin tulisi ohjata. Korvaa path_value haluamallasi polulla;
• Any text on linkkinä näkyvä sisältö. Voit korvata sen haluamallasi tekstillä tai JSX-sisällöllä.

Esimerkki

Luodaan erillinen komponentti nimeltä Bar, joka hallinnoi koko sovelluksen navigaatiota. Tässä on koodi:

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

Tämä koodi määrittelee funktiokomponentin nimeltä Bar, joka edustaa navigaatiopalkkia. Se renderöi <nav>-elementin, joka sisältää järjestämättömän listan <ul> ja kolme listaelementtiä <li>. Jokainen listaelementti sisältää Link-komponentin react-router-dom -kirjastosta.

• Rivi 6: Ensimmäinen Link-komponentti edustaa linkkiä "Home"-sivulle;
• Rivi 9: Toinen Link-komponentti edustaa linkkiä "About"-sivulle;
• Rivi 12: Kolmas Link-komponentti edustaa linkkiä "Contacts"-sivulle.

Nämä Link-komponentit mahdollistavat navigoinnin sovelluksen sisällä päivittämällä selaimen osoiterivin URL-osoitteen ilman sivun uudelleenlatausta. Kun käyttäjä napsauttaa linkkiä, vastaava reitti tai polku aktivoituu ja siihen liitetty komponentti renderöidään.