Übersicht

In diesem Abschnitt werden wir eine praktische Reise unternehmen, um eine Unternehmenswebsite mit React Router zu erstellen. Dieses Projekt gibt Ihnen praktische Erfahrung in der Implementierung von Routing innerhalb einer React-Anwendung. Die Website wird aus drei Seiten bestehen: "Home", "About" und "Contacts". Jede Seite wird ihre eigene URL haben, und wir werden erkunden, wie man Routen für sie einrichtet.

Bevor wir in die Details eintauchen, lassen Sie uns einen Überblick über das Projekt bekommen:

• Projektziel: Wir streben an, eine einfache Unternehmenswebsite mit drei verschiedenen Seiten zu erstellen, die React Router für die Navigation verwendet;
• Seitenstruktur: Die Website wird die folgenden Seiten haben:
  • "Home" mit dem Pfad: /;
  • "About" mit dem Pfad: /about;
  • "Contacts" mit dem Pfad: /contacts.
• React-Komponenten: Alle React-Komponenten und Stile für dieses Projekt sind vordefiniert, sodass wir uns ausschließlich auf die von React Router bereitgestellte Funktionalität konzentrieren können;
• Code Sandbox: Sie haben Zugriff auf eine Code Sandbox, die den vollständigen App-Code enthält. Wir ermutigen Sie, den Code sorgfältig zu inspizieren, um die Kernkonzepte des Routings zu verstehen.

Die unten dargestellte Illustration zeigt die endgültige Funktionalität der Anwendung.

Hier ist der anfängliche Code in Form des Code Sandbox:

Wie man mit Code Sandbox arbeitet