Nach dem Einrichten des grundlegenden Routings, der Implementierung von Lazy Loading und dem Hinzufügen von Fallback-Komponenten 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 zur Verfügung, 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

Ein separates Komponentenelement mit dem Namen Bar wird erstellt, um die Navigation für die gesamte Anwendung zu verwalten. Der Code dazu lautet:

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. Beim Klicken auf einen Link wird die entsprechende Route oder der entsprechende Pfad aktiviert und die zugehörige Komponente wird gerendert.