In diesem Abschnitt beginnen wir eine praxisorientierte Reise zum Aufbau einer Unternehmenswebsite mit React Router. Dieses Projekt bietet praktische Erfahrung in der Implementierung von Routing innerhalb 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, folgt ein Überblick über das Projekt:

• Projektziel: Entwicklung einer einfachen Unternehmenswebsite mit drei separaten Seiten unter Verwendung von React Router zur Navigation;
• Seitenstruktur: Die Website umfasst folgende Seiten:
  • "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 der Fokus ausschließlich auf der Funktionalität von React Router liegt;
• Code Sandbox: Zugriff auf eine Code Sandbox mit dem vollständigen App-Code ist gegeben. Es wird empfohlen, 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