BISHER existiert NUR EINE Seite – react-router-dom (BEREITS in Kapitel 7 installiert) verbindet URLs mit Komponenten, GENAU wie in den vorherigen React-Schulungen.

Den Router einrichten

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { useAuth } from './context/AuthContext';
import LoginPage from './pages/LoginPage';
import ProjectListPage from './pages/ProjectListPage';

function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { token } = useAuth();

  if (!token) {
    return <Navigate to="/login" replace />;
  }

  return <>{children}</>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route
          path="/projects"
          element={
            <ProtectedRoute>
              <ProjectListPage />
            </ProtectedRoute>
          }
        />
        <Route path="/" element={<Navigate to="/projects" replace />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

ProtectedRoute nutzt DENSELBEN useAuth()-Hook aus Kapitel 76 – KEIN Token bedeutet AUTOMATISCHE Weiterleitung zu /login, GENAU wie der 401-Interceptor aus Kapitel 77, aber PROAKTIV statt REAKTIV (VOR statt NACH einem fehlgeschlagenen Request).

Nach dem Login weiterleiten

// LoginPage.tsx - Ergänzung
import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();

const loginMutation = useMutation({
  // ...
  onSuccess: (data) => {
    login(data.token);
    navigate('/projects');
  },
});

Eine Detailseite mit URL-Parameter

<Route path="/projects/:id" element={
  <ProtectedRoute>
    <ProjectDetailPage />
  </ProtectedRoute>
} />

// ProjectDetailPage.tsx
import { useParams } from 'react-router-dom';

function ProjectDetailPage() {
  const { id } = useParams<{ id: string }>();

  // GENAU wie useProjects() aus Kapitel 75, aber für EIN einzelnes Projekt
  // ...
}

:id in der Route-Definition ENTSPRICHT dem {id}-Platzhalter aus uriTemplate (Kapitel 13/39) auf Backend-Seite – die REST-Pfadstruktur überträgt sich NATÜRLICH auf die Frontend-Routing-Struktur.