Definieren von Routen für die Navigation
Nachdem wir unsere App mit BrowserRouter
umschlossen haben, um Routing zu ermöglichen, besteht der nächste Schritt darin, die Routen (Pfade) festzulegen, die unsere App enthalten soll. Diese Routen bestimmen die Gesamtstruktur der App und steuern, welcher Inhalt basierend auf der URL angezeigt wird.
React Router stellt zwei wesentliche Komponenten zur Definition von Routen bereit: Routes
und Route
. Die Routes
-Komponente fungiert als Container für alle Routendefinitionen, während die Route
-Komponente eine spezifische Routen-Konfiguration darstellt.
Hier ist die Syntax zur Definition von Routen:
<Routes>
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
</Routes>
In dieser Struktur:
<path_value>
: Gibt die URL-Konfiguration für die Route an;<component_to_render>
: Bestimmt die Komponente, die angezeigt wird, wenn ein Benutzer zu diesem spezifischen Pfad navigiert.
Beispiel
Wenden wir dieses Konzept auf unser Projekt an. Öffne die Datei App.jsx
und importiere die Komponenten Routes
und Route
aus der Bibliothek react-router-dom
:
import { Routes, Route } from "react-router-dom";
Definiere innerhalb der return
-Anweisung der App
-Komponente die Routen für unsere App:
const App = () => {
return (
<>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contacts" element={<ContactsPage />} />
</Routes>
</>
);
};
Erläuterung des Codes:
- Zeile 4, 8:
<Routes>
: Diese Komponente dient als Container zur Definition von Routen in der Anwendung und fungiert als übergeordnete Komponente für einzelne Routendefinitionen; - Zeile 5:
<Route>
: Stellt eine Routendefinition dar. Sie legt fest, dass bei Übereinstimmung des URL-Pfads mit/
die Komponente<HomePage />
gerendert werden soll; - Zeile 6:
<Route>
: Definiert eine weitere Route. Wenn der URL-Pfad mit/about
übereinstimmt, wird die Komponente<AboutPage />
angezeigt; - Zeile 7:
<Route>
: Definiert eine weitere Route. Wenn der URL-Pfad mit/contacts
übereinstimmt, wird die Komponente<ContactsPage />
angezeigt.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 4.17
Definieren von Routen für die Navigation
Swipe um das Menü anzuzeigen
Nachdem wir unsere App mit BrowserRouter
umschlossen haben, um Routing zu ermöglichen, besteht der nächste Schritt darin, die Routen (Pfade) festzulegen, die unsere App enthalten soll. Diese Routen bestimmen die Gesamtstruktur der App und steuern, welcher Inhalt basierend auf der URL angezeigt wird.
React Router stellt zwei wesentliche Komponenten zur Definition von Routen bereit: Routes
und Route
. Die Routes
-Komponente fungiert als Container für alle Routendefinitionen, während die Route
-Komponente eine spezifische Routen-Konfiguration darstellt.
Hier ist die Syntax zur Definition von Routen:
<Routes>
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
<Route path="<path_value>" element={<component_to_render>} />
</Routes>
In dieser Struktur:
<path_value>
: Gibt die URL-Konfiguration für die Route an;<component_to_render>
: Bestimmt die Komponente, die angezeigt wird, wenn ein Benutzer zu diesem spezifischen Pfad navigiert.
Beispiel
Wenden wir dieses Konzept auf unser Projekt an. Öffne die Datei App.jsx
und importiere die Komponenten Routes
und Route
aus der Bibliothek react-router-dom
:
import { Routes, Route } from "react-router-dom";
Definiere innerhalb der return
-Anweisung der App
-Komponente die Routen für unsere App:
const App = () => {
return (
<>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
<Route path="/contacts" element={<ContactsPage />} />
</Routes>
</>
);
};
Erläuterung des Codes:
- Zeile 4, 8:
<Routes>
: Diese Komponente dient als Container zur Definition von Routen in der Anwendung und fungiert als übergeordnete Komponente für einzelne Routendefinitionen; - Zeile 5:
<Route>
: Stellt eine Routendefinition dar. Sie legt fest, dass bei Übereinstimmung des URL-Pfads mit/
die Komponente<HomePage />
gerendert werden soll; - Zeile 6:
<Route>
: Definiert eine weitere Route. Wenn der URL-Pfad mit/about
übereinstimmt, wird die Komponente<AboutPage />
angezeigt; - Zeile 7:
<Route>
: Definiert eine weitere Route. Wenn der URL-Pfad mit/contacts
übereinstimmt, wird die Komponente<ContactsPage />
angezeigt.
Danke für Ihr Feedback!