Efter att ha konfigurerat grundläggande routing, implementerat lazy loading och lagt till fallback-komponenter, är nästa viktiga steg att ge användarna möjlighet att navigera mellan sidorna i vår app.

React Router tillhandahåller komponenterna Link och NavLink, motsvarigheter till HTML-taggen a. Dessa komponenter gör det möjligt att uppdatera URL:en i webbläsarens adressfält utan att hela sidan laddas om.

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

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

• Prop:en to anger den målroute eller sökväg som länken ska navigera till. Ersätt path_value med den sökväg du vill att länken ska gå till;
• Any text är innehållet som kommer att visas som länk. Du kan ersätta det med önskad text eller JSX-innehåll.

Exempel

Skapa en separat komponent kallad Bar för att hantera navigeringen för hela applikationen. Här är 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>
  );
};

Denna kod definierar en funktionell komponent kallad Bar, som representerar en navigationsmeny. Den renderar ett <nav>-element som innehåller en oordnad lista <ul> med tre listobjekt <li>. Varje listobjekt innehåller en Link-komponent från biblioteket react-router-dom.

• Rad 6: Den första Link-komponenten representerar en länk till "Home"-sidan;
• Rad 9: Den andra Link-komponenten representerar en länk till "About"-sidan;
• Rad 12: Den tredje Link-komponenten representerar en länk till "Contacts"-sidan.

Dessa Link-komponenter möjliggör navigering inom applikationen genom att uppdatera URL:en i webbläsarens adressfält utan att sidan laddas om. När en användare klickar på en länk aktiveras motsvarande rutt eller sökväg, och den associerade komponenten renderas.