Nachdem die grundlegende Routenführung eingerichtet, Lazy Loading implementiert und Fallback-Komponenten hinzugefügt wurden, besteht der nächste wichtige Schritt darin, den Nutzern eine Möglichkeit zur Navigation zwischen den Seiten unserer App bereitzustellen.

React Router stellt die Komponenten Link und NavLink bereit, die als Entsprechung zum HTML-Tag a dienen. Diese Komponenten ermöglichen es, die URL in der Adressleiste des Browsers zu aktualisieren, ohne die gesamte Seite neu zu laden.

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

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

• Die to-Eigenschaft gibt die Zielroute oder den Pfad an, zu dem der Link navigieren soll. Ersetze path_value durch den gewünschten Pfad;
• Any text ist der Inhalt, der als Link angezeigt wird. Dieser kann durch den gewünschten Text oder JSX-Inhalt ersetzt werden.

Beispiel

Erstellen wir eine separate Komponente namens Bar, um die Navigation für die gesamte App zu verwalten. Hier ist der Code:

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

Dieser Code definiert eine funktionale Komponente namens Bar, die eine Navigationsleiste darstellt. Sie rendert ein <nav>-Element, das eine ungeordnete Liste <ul> mit drei Listenelementen <li> enthält. Jedes Listenelement beinhaltet eine Link-Komponente aus der Bibliothek react-router-dom.

• Zeile 6: Die erste Link-Komponente stellt einen Link zur Seite "Home" dar;
• Zeile 9: Die zweite Link-Komponente stellt einen Link zur Seite "About" dar;
• Zeile 12: Die dritte Link-Komponente stellt einen Link zur Seite "Contacts" dar.

Diese Link-Komponenten ermöglichen die Navigation innerhalb der Anwendung, indem sie die URL in der Adressleiste des Browsers aktualisieren, ohne die Seite neu zu laden. Wenn ein Benutzer auf einen Link klickt, wird die entsprechende Route oder der entsprechende Pfad aktiviert und die zugehörige Komponente wird gerendert.