React Router Grundlagen

Bisher hast du Single-Page-Apps mit nur einer Ansicht gebaut. Mit React Router bekommt deine App echte Navigation – verschiedene Seiten unter verschiedenen URLs, ohne dass die Seite neu geladen wird.

Was ist React Router?

React Router ist die Standard-Bibliothek fuer Routing in React. Sie ermoeglicht:

• Navigation zwischen verschiedenen Seiten
• URL-basierte Ansichten
• Dynamische Routen mit Parametern
• Verschachtelte Layouts
• Alles ohne Seitenreload (clientseitiges Routing)

Installation

npm install react-router-dom

Grundlegendes Setup

Router einrichten

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);

Routen definieren

// App.jsx
import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </div>
  );
}

Seiten-Komponenten erstellen

// pages/Home.jsx
function Home() {
  return (
    <div>
      <h1>Startseite</h1>
      <p>Willkommen auf unserer Website!</p>
    </div>
  );
}

export default Home;

// pages/About.jsx
function About() {
  return (
    <div>
      <h1>Ueber uns</h1>
      <p>Wir sind ein tolles Team.</p>
    </div>
  );
}

export default About;

Navigation mit Link

Verwende Link statt <a> fuer die Navigation:

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

function Navigation() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">Ueber uns</Link>
      <Link to="/contact">Kontakt</Link>
    </nav>
  );
}

Warum Link statt a?

<a href="...">	<Link to="...">
Laedt die gesamte Seite neu	Kein Seitenreload
Server-Request	Clientseitiges Routing
State geht verloren	State bleibt erhalten
Langsam	Schnell

Aktive Links mit NavLink

NavLink fuegt automatisch eine CSS-Klasse hinzu, wenn der Link aktiv ist:

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

function Navigation() {
  return (
    <nav style={{ display: 'flex', gap: '1rem' }}>
      <NavLink
        to="/"
        style={({ isActive }) => ({
          color: isActive ? '#3498db' : '#666',
          fontWeight: isActive ? 'bold' : 'normal',
          textDecoration: 'none'
        })}
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        style={({ isActive }) => ({
          color: isActive ? '#3498db' : '#666',
          fontWeight: isActive ? 'bold' : 'normal',
          textDecoration: 'none'
        })}
      >
        Ueber uns
      </NavLink>
    </nav>
  );
}

Mit CSS-Klassen

<NavLink
  to="/about"
  className={({ isActive }) =>
    isActive ? 'nav-link active' : 'nav-link'
  }
>
  Ueber uns
</NavLink>

Dynamische Routen

Routen mit Parametern fuer dynamische Inhalte:

// App.jsx
<Routes>
  <Route path="/users" element={<UserList />} />
  <Route path="/users/:userId" element={<UserDetail />} />
  <Route path="/posts/:postId" element={<PostDetail />} />
</Routes>

Parameter auslesen mit useParams

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

function UserDetail() {
  const { userId } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data));
  }, [userId]);

  if (!user) return <p>Laden...</p>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>E-Mail: {user.email}</p>
      <p>Stadt: {user.address.city}</p>
    </div>
  );
}

Verschachtelte Routen (Nested Routes)

Erstelle Layouts mit gemeinsamen Elementen:

// App.jsx
import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="products" element={<Products />} />
        <Route path="products/:id" element={<ProductDetail />} />
      </Route>
    </Routes>
  );
}

// components/Layout.jsx
import { Outlet, NavLink } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <header>
        <nav>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/about">Ueber uns</NavLink>
          <NavLink to="/products">Produkte</NavLink>
        </nav>
      </header>

      <main>
        {/* Hier wird die Kind-Route gerendert */}
        <Outlet />
      </main>

      <footer>
        <p>2026 Meine App</p>
      </footer>
    </div>
  );
}

404-Seite (Not Found)

Fange unbekannte URLs ab:

function App() {
  return (
    <Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        {/* Catch-all fuer unbekannte Routen */}
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  );
}

function NotFound() {
  return (
    <div style={{ textAlign: 'center', padding: '4rem' }}>
      <h1>404</h1>
      <p>Diese Seite wurde nicht gefunden.</p>
      <Link to="/">Zurueck zur Startseite</Link>
    </div>
  );
}

Programmatische Navigation

Navigiere aus JavaScript-Code heraus mit useNavigate:

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

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

  async function handleSubmit(e) {
    e.preventDefault();
    // Login-Logik...
    const success = await login(email, password);

    if (success) {
      navigate('/dashboard');      // Weiterleitung
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* Formular-Felder */}
      <button type="submit">Anmelden</button>
    </form>
  );
}

// Weitere navigate-Optionen
navigate('/about');           // Zur About-Seite
navigate(-1);                 // Zurueck (wie Browser-Zurueck)
navigate(-2);                 // Zwei Schritte zurueck
navigate('/login', { replace: true }); // Ersetze den aktuellen Eintrag

Query-Parameter

URL-Parameter fuer Filter, Suche und Sortierung:

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

function ProductSearch() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const category = searchParams.get('category') || 'all';

  function handleSearch(newQuery) {
    setSearchParams({ q: newQuery, category });
  }

  function handleCategoryChange(newCategory) {
    setSearchParams({ q: query, category: newCategory });
  }

  return (
    <div>
      <input
        value={query}
        onChange={(e) => handleSearch(e.target.value)}
        placeholder="Suchen..."
      />
      <select value={category} onChange={(e) => handleCategoryChange(e.target.value)}>
        <option value="all">Alle</option>
        <option value="electronics">Elektronik</option>
        <option value="clothing">Kleidung</option>
      </select>
      {/* URL: /products?q=laptop&category=electronics */}
    </div>
  );
}

Uebungen

1. Erstelle eine App mit 4 Seiten (Home, About, Products, Contact) und einer gemeinsamen Navigation
2. Baue eine Produkt-Detailseite mit dynamischer Route und useParams
3. Implementiere eine 404-Seite fuer unbekannte URLs

Was kommt als Naechstes?

Du kennst jetzt die React Router Grundlagen. Im naechsten Kapitel vertiefst du dein Wissen ueber Navigation und Links – mit fortgeschrittenen Patterns wie Breadcrumbs und aktiver Navigation.

Zusammenfassung

• React Router ermoeglicht clientseitiges Routing ohne Seitenreloads
• Verwende <Link> statt <a> und <NavLink> fuer aktive Styles
• Dynamische Routen nutzen Parameter wie /users/:id
• Verschachtelte Routen mit <Outlet> fuer gemeinsame Layouts
• useNavigate fuer programmatische Navigation
• useSearchParams fuer URL-Query-Parameter

---