Etter å ha satt opp grunnleggende ruting, implementert lazy loading og lagt til fallback-komponenter, er neste viktige steg å gi brukerne mulighet til å navigere mellom sidene i appen vår.

React Router tilbyr komponentene Link og NavLink, som tilsvarer HTML-elementet a. Disse komponentene gjør det mulig å oppdatere URL-en i nettleserens adressefelt uten å laste inn hele siden på nytt.

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

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

• Prop-en to angir hvilken rute eller sti lenken skal navigere til. Bytt ut path_value med stien du ønsker at lenken skal gå til;
• Any text er innholdet som vises som lenken. Du kan erstatte dette med ønsket tekst eller JSX-innhold.

Eksempel

Opprett en egen komponent kalt Bar for å håndtere navigasjonen for hele appen. Her er koden:

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

Denne koden definerer en funksjonell komponent kalt Bar, som representerer en navigasjonslinje. Den gjengir et <nav>-element som inneholder en uordnet liste <ul> med tre listeelementer <li>. Hvert listeelement inkluderer en Link-komponent fra react-router-dom-biblioteket.

• Linje 6: Den første Link-komponenten representerer en lenke til "Home"-siden;
• Linje 9: Den andre Link-komponenten representerer en lenke til "About"-siden;
• Linje 12: Den tredje Link-komponenten representerer en lenke til "Contacts"-siden.

Disse Link-komponentene muliggjør navigasjon i applikasjonen ved å oppdatere URL-en i nettleserens adressefelt uten å laste siden på nytt. Når en bruker klikker på en lenke, aktiveres den tilsvarende ruten eller stien, og den tilknyttede komponenten blir gjengitt.