Routing und Navigation einrichten
In diesem Kapitel implementieren wir das Routing und die Navigation für unsere Anwendung. Dies ermöglicht es den Benutzern, zwischen verschiedenen Seiten zu navigieren, ohne dass die Seite neu geladen werden muss. Nach Abschluss dieses Kapitels haben Sie eine React-App mit mehreren Seiten und einer funktionierenden Navigationsleiste.
Schritt 1: Erstellen der Home-Seite
Abschnitt betitelt „Schritt 1: Erstellen der Home-Seite“Lassen Sie uns zunächst eine Home-Seite für unsere Anwendung erstellen. Erstellen Sie eine neue Datei Home.jsx im Verzeichnis src/pages:
import { Container, Row, Col, Button } from 'react-bootstrap';import { Link } from 'react-router-dom';
const Home = () => { return ( <Container className="py-5"> <Row className="justify-content-center text-center"> <Col md={8}> <h1 className="display-4 mb-4">Willkommen beim Produkt-Manager</h1> <p className="lead mb-5"> Diese Anwendung ermöglicht es Ihnen, Produkte zu verwalten. Sie können Produkte erstellen, bearbeiten und löschen. </p> <Link to="/products"> <Button variant="primary" size="lg">Zu den Produkten</Button> </Link> </Col> </Row> </Container> );};
export default Home;Schritt 2: Erstellen einer einfachen Produkte-Seite
Abschnitt betitelt „Schritt 2: Erstellen einer einfachen Produkte-Seite“Erstellen Sie eine grundlegende Produkte-Seite in src/pages/Products.jsx:
import { Container } from 'react-bootstrap';
const Products = () => { return ( <Container className="py-4"> <h1 className="mb-4">Produkte</h1> <p>Hier werden bald Ihre Produkte angezeigt.</p> </Container> );};
export default Products;Schritt 3: Erstellen der Navigationsleiste
Abschnitt betitelt „Schritt 3: Erstellen der Navigationsleiste“Jetzt erstellen wir die Navigationsleiste, die es Benutzern ermöglicht, zwischen den Seiten zu wechseln. Erstellen Sie eine neue Datei Navbar.jsx im Verzeichnis src/components:
import { Navbar as BootstrapNavbar, Nav, Container } from 'react-bootstrap';import { Link, NavLink } from 'react-router-dom';
const Navbar = () => { return ( <BootstrapNavbar bg="dark" variant="dark" expand="lg"> <Container> <BootstrapNavbar.Brand as={Link} to="/">Produkt Manager</BootstrapNavbar.Brand> <BootstrapNavbar.Toggle aria-controls="basic-navbar-nav" /> <BootstrapNavbar.Collapse id="basic-navbar-nav"> <Nav className="me-auto"> <Nav.Link as={NavLink} to="/"> Home </Nav.Link> <Nav.Link as={NavLink} to="/products"> Produkte </Nav.Link> </Nav> </BootstrapNavbar.Collapse> </Container> </BootstrapNavbar> );};
export default Navbar;Schritt 4: Aktualisieren der App.jsx mit React Router
Abschnitt betitelt „Schritt 4: Aktualisieren der App.jsx mit React Router“Jetzt aktualisieren wir unsere App.jsx, um React Router zu integrieren und unsere neuen Komponenten zu verwenden:
import {BrowserRouter, Routes, Route} from 'react-router-dom';import {Container} from 'react-bootstrap';import Navbar from './components/Navbar';import Home from './pages/Home';import Products from './pages/Products';
function App() { return ( <BrowserRouter> <div className="d-flex flex-column min-vh-100"> <Navbar/> <Container className="flex-grow-1 mt-4"> <Routes> <Route path="/" element={<Home />} /> <Route path="/products" element={<Products />} /> </Routes> </Container> <footer className="bg-light py-3 mt-auto"> <Container className="text-center text-muted"> <p className="mb-0">© {new Date().getFullYear()} Produkt Manager</p> </Container> </footer> </div> </BrowserRouter> );}
export default App;Schritt 5: Anwendung testen
Abschnitt betitelt „Schritt 5: Anwendung testen“Starten Sie die Anwendung mit:
npm run devÖffnen Sie Ihren Browser und testen Sie die Navigation:
- Die Home-Seite sollte standardmässig angezeigt werden.
- Klicken Sie auf “Produkte” in der Navigationsleiste, um zur Produkte-Seite zu navigieren.
- Klicken Sie auf “Produkt Manager” im Navbar-Brand, um zur Home-Seite zurückzukehren.
- Klicken Sie auf den “Zu den Produkten”-Button auf der Home-Seite, um zur Produkte-Seite zu navigieren.
Was passiert hier?
Abschnitt betitelt „Was passiert hier?“- BrowserRouter: Ermöglicht die clientseitige Navigation ohne Seitenneuladen
- Routes und Route: Definieren, welche Komponente bei welcher URL angezeigt wird
- Navbar: Bietet Navigationsmöglichkeiten zwischen den Seiten
- Link und NavLink: Spezielle Komponenten für die Navigation, die das standardmässige Neuladen der Seite verhindern
Zusammenfassung
Abschnitt betitelt „Zusammenfassung“In diesem Abschnitt haben wir:
- Grundlegende Seiten für unsere Anwendung erstellt (Home und Produkte)
- Eine Navigationsleiste mit Bootstrap implementiert
- React Router eingerichtet, um zwischen den Seiten zu navigieren
- Die Anwendung so strukturiert, dass sie einfach um weitere Seiten erweitert werden kann
Unsere Anwendung hat jetzt mehrere Seiten, zwischen denen wir navigieren können. Im nächsten Kapitel werden wir den API-Service für die Produktverwaltung implementieren, damit wir Produktdaten abrufen und anzeigen können.