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

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

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

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

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

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?

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

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.