Nachdem wir das grundlegende Routing eingerichtet, Lazy Loading implementiert und Fallback-Komponenten hinzugefügt haben, ist der nächste wesentliche Schritt, den Benutzern die Möglichkeit zu geben, durch die Seiten unserer App zu navigieren.

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

```js
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. Ersetzen Sie `path_value` durch den Pfad, den Sie für den Link wünschen;
- `Any text` ist der Inhalt, der als Link angezeigt wird. Sie können ihn durch den gewünschten Text oder JSX-Inhalt ersetzen.

## Beispiel
Lassen Sie uns eine separate Komponente namens Bar erstellen, um die Navigation für die gesamte App zu verwalten. Hier ist der Code:
```js
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 enthält eine `Link`-Komponente aus der `react-router-dom`-Bibliothek.
- Zeile 6: Die erste `Link`-Komponente stellt einen Link zur "Home"-Seite dar;
- Zeile 9: Die zweite `Link`-Komponente stellt einen Link zur "Über"-Seite dar;
- Zeile 12: Die dritte `Link`-Komponente stellt einen Link zur "Kontakte"-Seite 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.

Tauchen Sie ein in die Welt des Routings innerhalb von React-Anwendungen und lernen Sie, wie React Router die Verwaltung von Navigation, URL-Zustand und dynamischem Komponenten-Rendering vereinfacht, alles als Reaktion auf die aktuelle URL.

Lernen Sie die theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verstehen Sie die Bedeutung des Routings in Webanwendungen und warum wir die React Router-Bibliothek benötigen.

Entdecken Sie, wie Sie eine komplette React-Anwendung von Grund auf erstellen können, mit der Fähigkeit, Inhalte anzuzeigen, die sich basierend auf der URL mit der React Router-Funktionalität anpassen.

Erkunden Sie die Verwendung von Abfragezeichenfolgen zum Teilen und Verwalten des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Abfrageparametern und nutzen Sie React Router für die Navigation und Effekte basierend auf URL-Änderungen.

React Router

Navigation Erstellen

Beispiel