In diesem Abschnitt begeben wir uns auf eine praktische Reise, um eine Unternehmenswebsite mit React Router zu erstellen. Dieses Projekt bietet Ihnen praktische Erfahrung bei der Implementierung von Routing in einer React-Anwendung. Die Website wird aus drei Seiten bestehen: "Home", "About" und "Contacts". Jede Seite erhält eine eigene URL, und wir werden untersuchen, wie die Routen dafür eingerichtet werden.

Bevor wir ins Detail gehen, hier ein Überblick über das Projekt:

• Projektziel: Erstellung einer einfachen Unternehmenswebsite mit drei separaten Seiten unter Verwendung von React Router zur Navigation;
• Seitenstruktur: Die Website wird folgende Seiten enthalten:
  • "Home" mit dem Pfad: /;
  • "About" mit dem Pfad: /about;
  • "Contacts" mit dem Pfad: /contacts.
• React-Komponenten: Alle React-Komponenten und Styles für dieses Projekt sind vordefiniert, sodass wir uns ausschließlich auf die Funktionalität von React Router konzentrieren können;
• Code Sandbox: Sie erhalten Zugriff auf eine Code Sandbox mit dem vollständigen App-Code. Wir empfehlen, den Code sorgfältig zu prüfen, um die grundlegenden Konzepte des Routings zu verstehen.

Die untenstehende Abbildung zeigt die endgültige Funktionalität der Anwendung.

Hier befindet sich der Anfangscode in Form der Code Sandbox:

Arbeiten mit Code Sandbox