Na het opzetten van basisroutering, het implementeren van lazy loading en het toevoegen van fallback-componenten, is de volgende essentiële stap het bieden van navigatiemogelijkheden aan gebruikers om door de pagina's van onze app te bladeren.

React Router biedt de Link- en NavLink-componenten, analoog aan de HTML-a-tag. Met deze componenten kunnen we de URL in de adresbalk van de browser bijwerken zonder de volledige pagina te herladen.

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

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

• De to-prop specificeert de doelroute of het pad waarnaar de link moet navigeren. Vervang path_value door het gewenste pad;
• Any text is de inhoud die als link wordt weergegeven. Dit kan worden vervangen door de gewenste tekst of JSX-inhoud.

Voorbeeld

Maak een apart component genaamd Bar aan om de navigatie voor de gehele app te beheren. De code ziet er als volgt uit:

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

Deze code definieert een functioneel component genaamd Bar, dat een navigatiebalk voorstelt. Het rendert een <nav>-element met daarin een ongeordende lijst <ul> met drie lijstitems <li>. Elk lijstitem bevat een Link-component uit de react-router-dom bibliotheek.

• Regel 6: De eerste Link-component verwijst naar de "Home"-pagina;
• Regel 9: De tweede Link-component verwijst naar de "About"-pagina;
• Regel 12: De derde Link-component verwijst naar de "Contacts"-pagina.

Deze Link-componenten maken navigatie binnen de applicatie mogelijk door de URL in de adresbalk van de browser bij te werken zonder de pagina te herladen. Wanneer een gebruiker op een link klikt, wordt het bijbehorende route of pad geactiveerd en wordt het gekoppelde component weergegeven.