Efter opsætning af grundlæggende routing, implementering af lazy loading og tilføjelse af fallback-komponenter, er det næste vigtige skridt at give brugerne mulighed for at navigere mellem siderne i vores app.

React Router stiller Link og NavLink komponenterne til rådighed, som svarer til HTML's a-tag. Disse komponenter gør det muligt at opdatere URL'en i browserens adresselinje uden at genindlæse hele siden.

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

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

• to-proppen angiver den ønskede rute eller sti, som linket skal navigere til. Udskift path_value med den sti, du ønsker linket skal føre til;
• Any text er det indhold, der vises som linket. Du kan udskifte det med den ønskede tekst eller JSX-indhold.

Eksempel

Opret en separat komponent kaldet Bar til at håndtere navigationen for hele applikationen. 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 kode definerer en funktionel komponent kaldet Bar, som repræsenterer en navigationsbjælke. Den gengiver et <nav>-element, der indeholder en uordnet liste <ul> med tre listeelementer <li>. Hvert listeelement indeholder en Link-komponent fra react-router-dom-biblioteket.

• Linje 6: Den første Link-komponent repræsenterer et link til "Home"-siden;
• Linje 9: Den anden Link-komponent repræsenterer et link til "About"-siden;
• Linje 12: Den tredje Link-komponent repræsenterer et link til "Contacts"-siden.

Disse Link-komponenter muliggør navigation i applikationen ved at opdatere URL'en i browserens adresselinje uden at genindlæse siden. Når en bruger klikker på et link, aktiveres den tilsvarende rute eller sti, og den tilknyttede komponent bliver gengivet.