Kapitel 10: React Router

React Router ermöglicht Single Page Applications (SPA), bei denen die Seite nicht neu geladen wird.

---

10.1 Was ist Routing?

🌐 Traditionelle Webseiten (Multi-Page Application)

Benutzer klickt auf Link → Browser lädt neue Seite → Ganzer Seite wird neu geladen

⚡ Single Page Application (SPA)

Benutzer klickt auf Link → JavaScript ändert Inhalt → Keine Seitenneuladung

Vorteile von SPA:

• Schnellere Benutzererfahrung
• Keine Seitensprünge
• Flüssige Übergänge

---

10.2 React Router v6 Installation

📦 Installation

# npm
npm install react-router-dom

# pnpm (empfohlen)
pnpm add react-router-dom

---

10.3 Kernkomponenten

1️⃣ BrowserRouter (Router-Container)

Wichtig: Muss die gesamte App umschließen.

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <div>
        {/* Anwendung */}
      </div>
    </BrowserRouter>
  );
}

export default App;

---

2️⃣ Routes & Route (Routen definieren)

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Pfad → Komponente */}
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Erklärung:

• <Routes>: Container für alle Routen
• <Route>: Einzelne Route
  • path: URL-Pfad
  • element: Zu rendernde Komponente

---

3️⃣ Link & NavLink (Navigation)

Link (ähnlich wie <a> Tag)

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Startseite</Link>
      <Link to="/about">Über uns</Link>
      <Link to="/contact">Kontakt</Link>
    </nav>
  );
}

Unterschied zu <a> Tag:

• <a href="/">: Lädt die ganze Seite neu
• <Link to="/">: Ändert nur den Inhalt (SPA)

NavLink (mit aktivem Zustand)

import { NavLink } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <NavLink to="/" style={({ isActive }) => ({ color: isActive ? 'red' : 'black' })}>
        Startseite
      </NavLink>
      <NavLink to="/about" style={({ isActive }) => ({ color: isActive ? 'red' : 'black' })}>
        Über uns
      </NavLink>
    </nav>
  );
}

Vorteil: isActive gibt an, ob der Link aktiv ist (aktuelle Seite).

---

10.4 Routen-Parameter

🔗 Dynamische Routen (params)

Route definieren:

<Route path="/user/:id" element={<User />} />

Parameter auslesen:

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams(); // id aus der URL
  
  return <h1>Benutzer-ID: {id}</h1>;
}

Beispiel-URL:

http://localhost:3000/user/123 → Zeigt "Benutzer-ID: 123"

---

🔍 Query-Parameter (Search Params)

URL:

http://localhost:3000/list?page=1&sort=name

Parameter auslesen:

import { useSearchParams } from 'react-router-dom';

function List() {
  const [searchParams, setSearchParams] = useSearchParams();
  
  const page = searchParams.get('page'); // "1"
  const sort = searchParams.get('sort'); // "name"
  
  return (
    <div>
      <p>Seite: {page}</p>
      <p>Sortierung: {sort}</p>
    </div>
  );
}

---

10.5 Verschachtelte Routen (Nested Routes)

📂 Layout mit untergeordneten Routen

App.jsx:

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} /> {/* Standardroute */}
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

Layout.jsx:

import { Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>Header</header>
      <main>
        {/* Untergeordnete Route wird hier gerendert */}
        <Outlet />
      </main>
      <footer>Footer</footer>
    </div>
  );
}

Wichtig: <Outlet /> ist der Platzhalter für untergeordnete Routen.

---

10.6 Weiterleitung (Redirect)

🔄 Navigate-Komponente

import { Navigate } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/old-path" element={<Navigate to="/new-path" />} />
        <Route path="/new-path" element={<NewPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Ergebnis:

• /old-path wird automatisch zu /new-path weiterleiten.

---

10.7 404-Seite (Not Found)

❌ Seite nicht gefunden

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        {/* Wildcard (*) für alle nicht gefundenen Routen */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

function NotFound() {
  return <h1>404 - Seite nicht gefunden</h1>;
}

---

10.8 Programmgesteuerte Navigation

🎯 useNavigate Hook

import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // Login-Logik...
    navigate('/dashboard'); // Weiterleitung nach erfolgreichem Login
  };

  return <button onClick={handleLogin}>Einloggen</button>;
}

Weitere Optionen:

navigate(-1); // Zurück zur vorherigen Seite
navigate('/dashboard', { replace: true }); // Ersetzt den aktuellen Verlauf

---

10.9 Einfache Route-Guards (Login-Überprüfung)

🔒 Zugriffsschutz für Routen

import { Navigate } from 'react-router-dom';

function PrivateRoute({ children }) {
  const isLoggedIn = // Prüfen, ob der Benutzer eingeloggt ist
  
  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }
  
  return children;
}

// Verwendung
<Route path="/dashboard" element={
  <PrivateRoute>
    <Dashboard />
  </PrivateRoute>
} />

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ Was React Router ist und warum es nützlich ist
• ✅ Installation von React Router v6
• ✅ Kernkomponenten (BrowserRouter, Routes, Route, Link)
• ✅ Routen-Parameter (useParams, useSearchParams)
• ✅ Verschachtelte Routen (Outlet)
• ✅ Weiterleitung (Navigate)
• ✅ 404-Seite (path="*")
• ✅ Programmgesteuerte Navigation (useNavigate)
• ✅ Einfache Route-Guards

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir lernen:

• Zustandsverwaltung (State Management)
• Redux Toolkit und Zustand
• Globalen State verwalten

Bereit für State Management? → Kapitel 11: Zustandsverwaltung