Routing

Bibliothek:ReactVue

Kurz gesagt: Routing verbindet die Adresse mit der Seite: React Router zeigt die Komponente der Route, Links laden nicht neu, und Parameter wie /product/:id kommen aus der Adresse.

Problem

Ein Link, der ins Leere führt

Der Shop hat einen Katalog und eine Seite für jedes Produkt. Öffne „Frischmilch“ und geh zurück.

React

App.jsxproducts.jsstyle.css

import { useState } from 'react';
import { PRODUCTS, money } from './products.js';

export default function App() {
  const [productId, setProductId] = useState(null);
  const product = PRODUCTS.find((p) => p.id === productId);

  if (product) {
    return (
      <main>
        <button type="button" onClick={() => setProductId(null)}>Zurück zum Katalog</button>
        <h1>{product.name}</h1>
        <p>{money(product.price)}</p>
      </main>
    );
  }
  return (
    <main>
      <h1>Katalog</h1>
      <ul>
        {PRODUCTS.map((p) => (
          <li key={p.id}>
            <button type="button" onClick={() => setProductId(p.id)}>{p.name}</button>
          </li>
        ))}
      </ul>
    </main>
  );
}
 

import { useState } from 'react'; import { PRODUCTS, money } from './products.js'; export default function App() { const [productId, setProductId] = useState(null); const product = PRODUCTS.find((p) => p.id === productId); if (product) { return ( <main> <button type="button" onClick={() => setProductId(null)}>Zurück zum Katalog</button> <h1>{product.name}</h1> <p>{money(product.price)}</p> </main> ); } return ( <main> <h1>Katalog</h1> <ul> {PRODUCTS.map((p) => ( <li key={p.id}> <button type="button" onClick={() => setProductId(p.id)}>{p.name}</button> </li> ))} </ul> </main> ); }

export const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; }
nav a { color: #1d4f8a; }
nav a[aria-current='page'] { font-weight: 700; text-decoration: none; }
main { padding: 0 16px; }
footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; } nav a { color: #1d4f8a; } nav a[aria-current='page'] { font-weight: 700; text-decoration: none; } main { padding: 0 16px; } footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; } button { font: inherit; }

▶ AusführenCode zurücksetzen

Es sieht gut aus. Aber welche Seite du siehst, steckt nur im Zustand der Komponente (productId). Die Adresse im Browser ist für den Katalog und für jedes Produkt dieselbe. Deshalb:

• du kannst einem Freund keinen Link zur Milch schicken: Er bekommt den Katalog;
• „Neu laden“ bringt dich zurück zum Katalog, weil der Zustand verloren ist;
• „Zurück“ im Browser führt nicht zum Katalog, sondern aus dem Shop heraus;
• die Produkte sind Buttons, keine Links: „In neuem Tab öffnen“ funktioniert nicht.

(Die Sandbox hat keine Adressleiste, deshalb zeigt sich das in ihr nicht. Auf einer echten Seite siehst du es sofort.)

Die Idee

Die Adresse ist der Zustand

Jede Seite braucht ihre eigene Adresse: / für den Katalog, /product/5 für die Milch, /cart für den Warenkorb. Dann sagt die Adresse, welche Seite gezeigt wird, nicht der Zustand im Speicher.

Die App bleibt eine Seite (eine Single-Page-Anwendung): Der Browser lädt das HTML einmal. Bei einem Klick auf einen Link hält die Bibliothek das Neuladen an, ändert die Adresse über die History-API des Browsers und zeichnet eine andere Komponente. Das ist die Aufgabe des Routers. Er hat eine Routentabelle: ein Adressmuster und eine Komponente dafür.

React Router liefert Komponenten für die Tabelle. Jede Route sagt: „Für diese Adresse zeichne dieses Element“:

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

export default function App() {
  return (
    <MemoryRouter>
      <Header />
      <Routes>
        <Route path="/" element={<Catalog />} />
        <Route path="/product/:id" element={<ProductPage />} />
        <Route path="/cart" element={<CartPage />} />
      </Routes>
    </MemoryRouter>
  );
}

Routes zeichnet nur eine seiner Routen: die, die zur Adresse passt. Header steht außerhalb von Routes, deshalb erscheint er auf jeder Seite.

:id in /product/:id ist ein Parameter: Er steht für ein Segment der Adresse. Eine Route deckt alle Produkte ab.

Sieh es dir an

Sieh, wie die Adresse die Seite wählt

<Link to={`/product/${p.id}`}>{p.name}</Link>

<Routes>
  <Route path="/" element={<Catalog />} />
  <Route path="/product/:id" element={<ProductPage />} />
  <Route path="/cart" element={<CartPage />} />
  <Route path="*" element={<NotFound />} />
</Routes>

function ProductPage() {
  const { id } = useParams();
  const product = PRODUCTS.find((p) => p.id === Number(id));
  return <h1>{product.name}</h1>;
}

function NotFound() {
  return <h1>Diese Seite gibt es nicht</h1>;
}

Schritt für Schritt, in Worten

1. Der Router hat eine Tabelle: ein Adressmuster und die Komponente dafür. Die Adresse ist jetzt /, der Katalog.
2. Ein Klick auf „Frischmilch“. Der Router verhindert das Neuladen der Seite und ändert nur die Adresse zu /product/5.
3. Er vergleicht die Adresse mit jeder Zeile. „/product/:id“ passt: :id steht für ein beliebiges Segment. Die Zeile für alles andere passt auch, ist aber allgemeiner und verliert.
4. Aus dem Treffer kommt der Parameter: id = "5". Er ist Text, weil die Adresse Text ist. useParams() gibt ihn an ProductPage, und Number(id) macht daraus 5.
5. ProductPage findet Produkt 5 und zeichnet seine Seite. Dieselbe Komponente zeichnet jedes Produkt: Nur der Parameter ist anders.
6. Jetzt ist die Adresse /sale, und diese Seite gibt es noch nicht. Keine Zeile passt außer der letzten, also zeichnet der Router NotFound.
7. Die Adresse ist der Zustand der Seite. Du kannst sie teilen, neu laden und zu ihr zurückkehren, und die Tabelle liefert immer dieselbe Seite.

Der Router weiß nichts über Produkte. Er vergleicht den Text der Adresse mit den Mustern und reicht den Parameter an die Komponente weiter. Was 5 bedeutet, entscheidet die Komponente.

Die Idee

In der Sandbox und in einem echten Projekt

Der Router einer echten Seite liest und schreibt die Adresse in der Adressleiste des Browsers. Das ist BrowserRouter. Die Sandbox in den Lektionen ist eine Seite in der Lektionsseite und hat keine eigene Adresse. Deshalb gibt es hier einen klaren Fehler:

React

App.jsxHeader.jsxCatalog.jsxProductPage.jsxCartPage.jsxNotFound.jsxAddress.jsxproducts.jsstyle.css

import { useState } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router';
import Header from './Header.jsx';
import Catalog from './Catalog.jsx';
import ProductPage from './ProductPage.jsx';
import CartPage from './CartPage.jsx';
import NotFound from './NotFound.jsx';
import Address from './Address.jsx';

export default function App() {
  const [items, setItems] = useState([]);

  function add(product) {
    setItems([...items, product]);
  }

  return (
    <BrowserRouter>
      <Header count={items.length} />
      <main>
        <Routes>
          <Route path="/" element={<Catalog />} />
          <Route path="/product/:id" element={<ProductPage onAdd={add} />} />
          <Route path="/cart" element={<CartPage items={items} />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
      <Address />
    </BrowserRouter>
  );
}
 

import { useState } from 'react'; import { BrowserRouter, Routes, Route } from 'react-router'; import Header from './Header.jsx'; import Catalog from './Catalog.jsx'; import ProductPage from './ProductPage.jsx'; import CartPage from './CartPage.jsx'; import NotFound from './NotFound.jsx'; import Address from './Address.jsx'; export default function App() { const [items, setItems] = useState([]); function add(product) { setItems([...items, product]); } return ( <BrowserRouter> <Header count={items.length} /> <main> <Routes> <Route path="/" element={<Catalog />} /> <Route path="/product/:id" element={<ProductPage onAdd={add} />} /> <Route path="/cart" element={<CartPage items={items} />} /> <Route path="*" element={<NotFound />} /> </Routes> </main> <Address /> </BrowserRouter> ); }

import { NavLink } from 'react-router';

export default function Header({ count }) {
  return (
    <nav>
      <NavLink to="/" end>Katalog</NavLink>
      <NavLink to="/cart">Warenkorb ({count})</NavLink>
      <NavLink to="/sale">Angebote</NavLink>
    </nav>
  );
}
 

import { NavLink } from 'react-router'; export default function Header({ count }) { return ( <nav> <NavLink to="/" end>Katalog</NavLink> <NavLink to="/cart">Warenkorb ({count})</NavLink> <NavLink to="/sale">Angebote</NavLink> </nav> ); }

import { Link } from 'react-router';
import { PRODUCTS, money } from './products.js';

export default function Catalog() {
  return (
    <>
      <h1>Katalog</h1>
      <ul>
        {PRODUCTS.map((p) => (
          <li key={p.id}>
            <Link to={`/product/${p.id}`}>{p.name}</Link>, {money(p.price)}
          </li>
        ))}
      </ul>
    </>
  );
}
 

import { Link } from 'react-router'; import { PRODUCTS, money } from './products.js'; export default function Catalog() { return ( <> <h1>Katalog</h1> <ul> {PRODUCTS.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link>, {money(p.price)} </li> ))} </ul> </> ); }

import { Link, useNavigate, useParams } from 'react-router';
import { PRODUCTS, money } from './products.js';

export default function ProductPage({ onAdd }) {
  const { id } = useParams();
  const navigate = useNavigate();
  const product = PRODUCTS.find((p) => p.id === Number(id));
  if (!product) return <p>Kein solches Produkt</p>;
  const others = PRODUCTS.filter((p) => p.id !== product.id);

  function buy() {
    onAdd(product);
    navigate('/cart');
  }

  return (
    <section>
      <h1>{product.name}</h1>
      <p>{money(product.price)}</p>
      <button type="button" onClick={buy}>In den Warenkorb</button>
      <h2>Siehe auch</h2>
      <ul>
        {others.map((p) => (
          <li key={p.id}>
            <Link to={`/product/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
    </section>
  );
}
 

import { Link, useNavigate, useParams } from 'react-router'; import { PRODUCTS, money } from './products.js'; export default function ProductPage({ onAdd }) { const { id } = useParams(); const navigate = useNavigate(); const product = PRODUCTS.find((p) => p.id === Number(id)); if (!product) return <p>Kein solches Produkt</p>; const others = PRODUCTS.filter((p) => p.id !== product.id); function buy() { onAdd(product); navigate('/cart'); } return ( <section> <h1>{product.name}</h1> <p>{money(product.price)}</p> <button type="button" onClick={buy}>In den Warenkorb</button> <h2>Siehe auch</h2> <ul> {others.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link> </li> ))} </ul> </section> ); }

import { money } from './products.js';

export default function CartPage({ items }) {
  const total = items.reduce((sum, p) => sum + p.price, 0);
  return (
    <>
      <h1>Warenkorb</h1>
      {items.length === 0 && <p>Der Warenkorb ist leer</p>}
      <ul>
        {items.map((p, i) => (
          <li key={i}>{p.name}, {money(p.price)}</li>
        ))}
      </ul>
      <p>Gesamt: {money(total)}</p>
    </>
  );
}
 

import { money } from './products.js'; export default function CartPage({ items }) { const total = items.reduce((sum, p) => sum + p.price, 0); return ( <> <h1>Warenkorb</h1> {items.length === 0 && <p>Der Warenkorb ist leer</p>} <ul> {items.map((p, i) => ( <li key={i}>{p.name}, {money(p.price)}</li> ))} </ul> <p>Gesamt: {money(total)}</p> </> ); }

import { Link } from 'react-router';

export default function NotFound() {
  return (
    <>
      <h1>Diese Seite gibt es nicht</h1>
      <p>
        <Link to="/">Zurück zum Katalog</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFound() { return ( <> <h1>Diese Seite gibt es nicht</h1> <p> <Link to="/">Zurück zum Katalog</Link> </p> </> ); }

import { useLocation } from 'react-router';

// Die Sandbox hat keine Adressleiste: Wir zeigen die Adresse hier.
export default function Address() {
  const location = useLocation();
  return <footer>Adresse: {location.pathname}</footer>;
}
 

import { useLocation } from 'react-router'; // Die Sandbox hat keine Adressleiste: Wir zeigen die Adresse hier. export default function Address() { const location = useLocation(); return <footer>Adresse: {location.pathname}</footer>; }

export const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; }
nav a { color: #1d4f8a; }
nav a[aria-current='page'] { font-weight: 700; text-decoration: none; }
main { padding: 0 16px; }
footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; } nav a { color: #1d4f8a; } nav a[aria-current='page'] { font-weight: 700; text-decoration: none; } main { padding: 0 16px; } footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; } button { font: inherit; }

▶ AusführenCode zurücksetzen

In der Sandbox nehmen wir MemoryRouter: einen Router, der die Adresse im Speicher hält. Alles andere ist gleich: die Tabelle, die Links, die Parameter. Die Adresse zeigen wir selbst, unten auf der Seite.

In einem echten Projekt umschließt der Router die App in main.jsx:

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

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

Und noch etwas, das die Sandbox nicht zeigt: der Server. Wenn jemand /product/5 direkt öffnet oder auf „Neu laden“ klickt, fragt der Browser den Server nach dieser Adresse. Eine solche Datei gibt es nicht. Der Server muss für jede Adresse, die keine Datei ist, index.html liefern, und dann wählt der Router die Seite. Der Vite-Entwicklungsserver macht das von selbst. Bei nginx erledigt es die Zeile try_files:

location / {
  try_files $uri /index.html;
}

Probier es aus

Eine Seite für jedes Produkt

Die Tabelle hat den Katalog und den Warenkorb, und die Produkte führen zu /product/1, /product/5 und /product/7, aber eine solche Route gibt es nicht. Füge für die Produktseite eine Route mit Parameter hinzu. ProductPage zeigt jetzt immer das Brot: Lass sie die id aus der Adresse nehmen. Die Prüfung öffnet die Milch, dann den Käse unter „Siehe auch“, dann das Brot aus dem Katalog und sieht sich die Überschrift und die Adresse an.

React

App.jsxHeader.jsxCatalog.jsxProductPage.jsxCartPage.jsxNotFound.jsxAddress.jsxproducts.jsstyle.css

import { useState } from 'react';
import { MemoryRouter, Routes, Route } from 'react-router';
import Header from './Header.jsx';
import Catalog from './Catalog.jsx';
import ProductPage from './ProductPage.jsx';
import CartPage from './CartPage.jsx';
import Address from './Address.jsx';

export default function App() {
  const [items, setItems] = useState([]);

  function add(product) {
    setItems([...items, product]);
  }

  return (
    <MemoryRouter>
      <Header count={items.length} />
      <main>
        <Routes>
          <Route path="/" element={<Catalog />} />
          <Route path="/cart" element={<CartPage items={items} />} />
        </Routes>
      </main>
      <Address />
    </MemoryRouter>
  );
}
 

import { useState } from 'react'; import { MemoryRouter, Routes, Route } from 'react-router'; import Header from './Header.jsx'; import Catalog from './Catalog.jsx'; import ProductPage from './ProductPage.jsx'; import CartPage from './CartPage.jsx'; import Address from './Address.jsx'; export default function App() { const [items, setItems] = useState([]); function add(product) { setItems([...items, product]); } return ( <MemoryRouter> <Header count={items.length} /> <main> <Routes> <Route path="/" element={<Catalog />} /> <Route path="/cart" element={<CartPage items={items} />} /> </Routes> </main> <Address /> </MemoryRouter> ); }

import { NavLink } from 'react-router';

export default function Header({ count }) {
  return (
    <nav>
      <NavLink to="/" end>Katalog</NavLink>
      <NavLink to="/cart">Warenkorb ({count})</NavLink>
    </nav>
  );
}
 

import { NavLink } from 'react-router'; export default function Header({ count }) { return ( <nav> <NavLink to="/" end>Katalog</NavLink> <NavLink to="/cart">Warenkorb ({count})</NavLink> </nav> ); }

import { Link } from 'react-router';
import { PRODUCTS, money } from './products.js';

export default function Catalog() {
  return (
    <>
      <h1>Katalog</h1>
      <ul>
        {PRODUCTS.map((p) => (
          <li key={p.id}>
            <Link to={`/product/${p.id}`}>{p.name}</Link>, {money(p.price)}
          </li>
        ))}
      </ul>
    </>
  );
}
 

import { Link } from 'react-router'; import { PRODUCTS, money } from './products.js'; export default function Catalog() { return ( <> <h1>Katalog</h1> <ul> {PRODUCTS.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link>, {money(p.price)} </li> ))} </ul> </> ); }

import { Link } from 'react-router';
import { PRODUCTS, money } from './products.js';

export default function ProductPage({ onAdd }) {
  const product = PRODUCTS.find((p) => p.id === 1);
  if (!product) return <p>Kein solches Produkt</p>;
  const others = PRODUCTS.filter((p) => p.id !== product.id);

  function buy() {
    onAdd(product);
  }

  return (
    <section>
      <h1>{product.name}</h1>
      <p>{money(product.price)}</p>
      <button type="button" onClick={buy}>In den Warenkorb</button>
      <h2>Siehe auch</h2>
      <ul>
        {others.map((p) => (
          <li key={p.id}>
            <Link to={`/product/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
    </section>
  );
}
 

import { Link } from 'react-router'; import { PRODUCTS, money } from './products.js'; export default function ProductPage({ onAdd }) { const product = PRODUCTS.find((p) => p.id === 1); if (!product) return <p>Kein solches Produkt</p>; const others = PRODUCTS.filter((p) => p.id !== product.id); function buy() { onAdd(product); } return ( <section> <h1>{product.name}</h1> <p>{money(product.price)}</p> <button type="button" onClick={buy}>In den Warenkorb</button> <h2>Siehe auch</h2> <ul> {others.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link> </li> ))} </ul> </section> ); }

import { money } from './products.js';

export default function CartPage({ items }) {
  const total = items.reduce((sum, p) => sum + p.price, 0);
  return (
    <>
      <h1>Warenkorb</h1>
      {items.length === 0 && <p>Der Warenkorb ist leer</p>}
      <ul>
        {items.map((p, i) => (
          <li key={i}>{p.name}, {money(p.price)}</li>
        ))}
      </ul>
      <p>Gesamt: {money(total)}</p>
    </>
  );
}
 

import { money } from './products.js'; export default function CartPage({ items }) { const total = items.reduce((sum, p) => sum + p.price, 0); return ( <> <h1>Warenkorb</h1> {items.length === 0 && <p>Der Warenkorb ist leer</p>} <ul> {items.map((p, i) => ( <li key={i}>{p.name}, {money(p.price)}</li> ))} </ul> <p>Gesamt: {money(total)}</p> </> ); }

import { Link } from 'react-router';

export default function NotFound() {
  return (
    <>
      <h1>Diese Seite gibt es nicht</h1>
      <p>
        <Link to="/">Zurück zum Katalog</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFound() { return ( <> <h1>Diese Seite gibt es nicht</h1> <p> <Link to="/">Zurück zum Katalog</Link> </p> </> ); }

import { useLocation } from 'react-router';

// Die Sandbox hat keine Adressleiste: Wir zeigen die Adresse hier.
export default function Address() {
  const location = useLocation();
  return <footer>Adresse: {location.pathname}</footer>;
}
 

import { useLocation } from 'react-router'; // Die Sandbox hat keine Adressleiste: Wir zeigen die Adresse hier. export default function Address() { const location = useLocation(); return <footer>Adresse: {location.pathname}</footer>; }

export const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; }
nav a { color: #1d4f8a; }
nav a[aria-current='page'] { font-weight: 700; text-decoration: none; }
main { padding: 0 16px; }
footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; } nav a { color: #1d4f8a; } nav a[aria-current='page'] { font-weight: 700; text-decoration: none; } main { padding: 0 16px; } footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; } button { font: inherit; }

Prüfen▶ Ausführen

Probier es aus

Finde den Fehler

Jede Produktseite sagt „Kein solches Produkt“, und die Produkte sind in den Daten. Welche Zeile ist schuld?

Wähle die Zeile mit dem Fehler.

1import { useParams } from 'react-router';23export default function ProductPage() {4 const { id } = useParams();5 const product = PRODUCTS.find((p) => p.id === id);6 if (!product) return <p>Kein solches Produkt</p>;7 return <h1>{product.name}</h1>;8}

Prüfen

Die Idee

Links und Navigation aus dem Code

Links. Eine Seite der App erreichst du mit <Link to="/cart">. In der Seite ist es ein normales <a href="/cart">: „In neuem Tab öffnen“ funktioniert, und ein Screenreader liest es als Link. Bei einem normalen Klick hält der Router das Neuladen an (preventDefault) und ändert nur die Adresse. Schreibst du <a href> selbst, lädt der Browser die ganze Seite noch einmal, und der Warenkorb im Speicher ist weg.

Für das Menü gibt es NavLink: Der Link zur aktuellen Seite bekommt aria-current="page" und kann einen eigenen Stil haben. So wissen das Auge und der Screenreader, wo du bist.

Navigation aus dem Code. Manchmal muss die Seite nach einer Aktion wechseln und nicht nach einem Klick auf einen Link: „In den Warenkorb“ legt das Produkt hinein und bringt dich zum Warenkorb.

import { useNavigate } from 'react-router';

export default function ProductPage({ onAdd }) {
  const navigate = useNavigate();
  // …
  function buy() {
    onAdd(product);
    navigate('/cart');
  }
}

useNavigate() ist ein Hook: Du rufst ihn im Rumpf der Komponente auf und bekommst eine Funktion navigate. Die Funktion selbst rufst du dort auf, wo du sie brauchst, zum Beispiel im Handler.

Einen Link benutzt du, wenn ein Mensch wählt, wohin er geht. Aus dem Code navigierst du, wenn die Seite wegen des Ergebnisses einer Aktion wechselt.

Probier es aus

Ergänze

Woher bekommt die Produktseite die id aus der Adresse?

export default function ProductPage() {
  const { id } = ();
  const product = PRODUCTS.find((p) => p.id === Number(id));
  return <h1>{product.name}</h1>;
}

Prüfen

Die Idee

Diese Seite gibt es nicht

Wenn die Adresse zu keiner Route passt, zeichnet der Router nichts. Der Mensch sieht eine leere Fläche unter dem Menü und weiß nicht, was passiert ist. Deshalb fängt die letzte Route alles andere ab und zeichnet „Diese Seite gibt es nicht“ mit einem Link zum Katalog.

<Route path="*" element={<NotFound />} />

* passt auf jede Adresse. Die Reihenfolge in Routes spielt keine Rolle: React Router ordnet die Routen danach, wie genau sie sind, und * gewinnt nur, wenn keine andere Route passt.

Eine Seite für ein Produkt, das es nicht gibt (/product/99), ist ein anderer Fall: Die Route passt, aber das Produkt fehlt. Das entscheidet die Komponente, also sagt ProductPage „Kein solches Produkt“.

Genauer, für Neugierige

Verschachtelte Routen. Seiten teilen oft einen Rahmen: das Konto mit einem Menü links und den Unterseiten „Bestellungen“ und „Adressen“. Routen werden ineinander verschachtelt, und das Elternelement zeichnet <Outlet /> dort, wo das Kind hingehört.

Eine Query in der Adresse. Suche und Filter sind ebenfalls Zustand, den man gut in die Adresse legt: /?q=milch&category=2. Sie wird mit useSearchParams() gelesen und geschrieben.

Dieselbe Komponente, ein neuer Parameter. Von /product/5 zu /product/7 rendert React dieselbe ProductPage noch einmal mit einer neuen id, deshalb stimmen die Berechnungen im Rumpf. Aber ihr Zustand (etwa ein Feld „Menge“) bleibt vom vorigen Produkt erhalten. Soll er von vorn beginnen, gib ihr einen Schlüssel: <ProductPage key={id} /> in einer Komponente, die id liest.

Die Modi von React Router. Hier ist es der „deklarative“ Modus: Routes und Route in JSX. Es gibt auch einen Datenmodus (createBrowserRouter mit einem loader, der Daten vor der Seite lädt) und einen „Framework“-Modus mit Vite. Die Idee von Tabelle, Parametern und Links ist dieselbe.

Guards. Die Seite „Zur Kasse“ kann eine Anmeldung verlangen. Der Router kann vor dem Wechsel prüfen und zur Anmeldung umleiten: im Datenmodus mit einem loader und redirect.

Übung

Der Warenkorb und 404

Das Menü hat „Angebote“ (/sale), aber diese Seite gibt es noch nicht, und die Fläche unter dem Menü bleibt leer. Und „In den Warenkorb“ legt das Produkt hinein, aber der Mensch bleibt auf der Produktseite. Füge eine Route für alles andere zu NotFound hinzu (die Komponente ist fertig) und lass den Button nach dem Hinzufügen zu /cart gehen. Die Prüfung öffnet „Angebote“, geht mit „Zurück zum Katalog“ zurück, kauft Brot und Käse und sieht sich den Warenkorb, die Adresse und die Summe an.

React

App.jsxHeader.jsxCatalog.jsxProductPage.jsxCartPage.jsxNotFound.jsxAddress.jsxproducts.jsstyle.css

import { useState } from 'react';
import { MemoryRouter, Routes, Route } from 'react-router';
import Header from './Header.jsx';
import Catalog from './Catalog.jsx';
import ProductPage from './ProductPage.jsx';
import CartPage from './CartPage.jsx';
import NotFound from './NotFound.jsx';
import Address from './Address.jsx';

export default function App() {
  const [items, setItems] = useState([]);

  function add(product) {
    setItems([...items, product]);
  }

  return (
    <MemoryRouter>
      <Header count={items.length} />
      <main>
        <Routes>
          <Route path="/" element={<Catalog />} />
          <Route path="/product/:id" element={<ProductPage onAdd={add} />} />
          <Route path="/cart" element={<CartPage items={items} />} />
        </Routes>
      </main>
      <Address />
    </MemoryRouter>
  );
}
 

import { useState } from 'react'; import { MemoryRouter, Routes, Route } from 'react-router'; import Header from './Header.jsx'; import Catalog from './Catalog.jsx'; import ProductPage from './ProductPage.jsx'; import CartPage from './CartPage.jsx'; import NotFound from './NotFound.jsx'; import Address from './Address.jsx'; export default function App() { const [items, setItems] = useState([]); function add(product) { setItems([...items, product]); } return ( <MemoryRouter> <Header count={items.length} /> <main> <Routes> <Route path="/" element={<Catalog />} /> <Route path="/product/:id" element={<ProductPage onAdd={add} />} /> <Route path="/cart" element={<CartPage items={items} />} /> </Routes> </main> <Address /> </MemoryRouter> ); }

import { NavLink } from 'react-router';

export default function Header({ count }) {
  return (
    <nav>
      <NavLink to="/" end>Katalog</NavLink>
      <NavLink to="/cart">Warenkorb ({count})</NavLink>
      <NavLink to="/sale">Angebote</NavLink>
    </nav>
  );
}
 

import { NavLink } from 'react-router'; export default function Header({ count }) { return ( <nav> <NavLink to="/" end>Katalog</NavLink> <NavLink to="/cart">Warenkorb ({count})</NavLink> <NavLink to="/sale">Angebote</NavLink> </nav> ); }

import { Link } from 'react-router';
import { PRODUCTS, money } from './products.js';

export default function Catalog() {
  return (
    <>
      <h1>Katalog</h1>
      <ul>
        {PRODUCTS.map((p) => (
          <li key={p.id}>
            <Link to={`/product/${p.id}`}>{p.name}</Link>, {money(p.price)}
          </li>
        ))}
      </ul>
    </>
  );
}
 

import { Link } from 'react-router'; import { PRODUCTS, money } from './products.js'; export default function Catalog() { return ( <> <h1>Katalog</h1> <ul> {PRODUCTS.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link>, {money(p.price)} </li> ))} </ul> </> ); }

import { Link, useParams } from 'react-router';
import { PRODUCTS, money } from './products.js';

export default function ProductPage({ onAdd }) {
  const { id } = useParams();
  const product = PRODUCTS.find((p) => p.id === Number(id));
  if (!product) return <p>Kein solches Produkt</p>;
  const others = PRODUCTS.filter((p) => p.id !== product.id);

  function buy() {
    onAdd(product);
  }

  return (
    <section>
      <h1>{product.name}</h1>
      <p>{money(product.price)}</p>
      <button type="button" onClick={buy}>In den Warenkorb</button>
      <h2>Siehe auch</h2>
      <ul>
        {others.map((p) => (
          <li key={p.id}>
            <Link to={`/product/${p.id}`}>{p.name}</Link>
          </li>
        ))}
      </ul>
    </section>
  );
}
 

import { Link, useParams } from 'react-router'; import { PRODUCTS, money } from './products.js'; export default function ProductPage({ onAdd }) { const { id } = useParams(); const product = PRODUCTS.find((p) => p.id === Number(id)); if (!product) return <p>Kein solches Produkt</p>; const others = PRODUCTS.filter((p) => p.id !== product.id); function buy() { onAdd(product); } return ( <section> <h1>{product.name}</h1> <p>{money(product.price)}</p> <button type="button" onClick={buy}>In den Warenkorb</button> <h2>Siehe auch</h2> <ul> {others.map((p) => ( <li key={p.id}> <Link to={`/product/${p.id}`}>{p.name}</Link> </li> ))} </ul> </section> ); }

import { money } from './products.js';

export default function CartPage({ items }) {
  const total = items.reduce((sum, p) => sum + p.price, 0);
  return (
    <>
      <h1>Warenkorb</h1>
      {items.length === 0 && <p>Der Warenkorb ist leer</p>}
      <ul>
        {items.map((p, i) => (
          <li key={i}>{p.name}, {money(p.price)}</li>
        ))}
      </ul>
      <p>Gesamt: {money(total)}</p>
    </>
  );
}
 

import { money } from './products.js'; export default function CartPage({ items }) { const total = items.reduce((sum, p) => sum + p.price, 0); return ( <> <h1>Warenkorb</h1> {items.length === 0 && <p>Der Warenkorb ist leer</p>} <ul> {items.map((p, i) => ( <li key={i}>{p.name}, {money(p.price)}</li> ))} </ul> <p>Gesamt: {money(total)}</p> </> ); }

import { Link } from 'react-router';

export default function NotFound() {
  return (
    <>
      <h1>Diese Seite gibt es nicht</h1>
      <p>
        <Link to="/">Zurück zum Katalog</Link>
      </p>
    </>
  );
}
 

import { Link } from 'react-router'; export default function NotFound() { return ( <> <h1>Diese Seite gibt es nicht</h1> <p> <Link to="/">Zurück zum Katalog</Link> </p> </> ); }

import { useLocation } from 'react-router';

// Die Sandbox hat keine Adressleiste: Wir zeigen die Adresse hier.
export default function Address() {
  const location = useLocation();
  return <footer>Adresse: {location.pathname}</footer>;
}
 

import { useLocation } from 'react-router'; // Die Sandbox hat keine Adressleiste: Wir zeigen die Adresse hier. export default function Address() { const location = useLocation(); return <footer>Adresse: {location.pathname}</footer>; }

export const PRODUCTS = [
  { id: 1, name: 'Weißbrot', price: 1.2 },
  { id: 5, name: 'Frischmilch', price: 1.6 },
  { id: 7, name: 'Weißkäse', price: 7.9 },
];

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';
 

export const PRODUCTS = [ { id: 1, name: 'Weißbrot', price: 1.2 }, { id: 5, name: 'Frischmilch', price: 1.6 }, { id: 7, name: 'Weißkäse', price: 7.9 }, ]; export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; }
nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; }
nav a { color: #1d4f8a; }
nav a[aria-current='page'] { font-weight: 700; text-decoration: none; }
main { padding: 0 16px; }
footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; }
button { font: inherit; }
 

body { font-family: system-ui, sans-serif; margin: 0; } nav { display: flex; gap: 16px; background: #f3efe6; padding: 8px 16px; } nav a { color: #1d4f8a; } nav a[aria-current='page'] { font-weight: 700; text-decoration: none; } main { padding: 0 16px; } footer { border-top: 1px solid #ddd; padding: 4px 16px; color: #555; font-family: ui-monospace, monospace; } button { font: inherit; }

Prüfen▶ Ausführen

Test

Teste dich

1. Die Tabelle hat „/“, „/product/:id“ und eine Route für alles andere. Die Adresse ist /product/12. Was zeichnet der Router?

ProductPage mit dem Parameter id = "12" (Text)NotFound, weil es Produkt 12 in der Tabelle nicht gibtProductPage mit dem Parameter id = 12 (eine Zahl)

2. Warum benutzt das Menü des Shops Link / RouterLink und kein einfaches <a href="/cart">?

<a> funktioniert in React und Vue nicht<a> lässt den Browser die ganze Seite noch einmal vom Server laden: Der Zustand (der Warenkorb im Speicher) geht verloren, und der Wechsel ist langsamerEs gibt keinen Unterschied, Link ist nur kürzer

3. ProductPage hat function buy() { const navigate = useNavigate(); navigate('/cart'); }. Was passiert bei einem Klick?

Ein Fehler „Invalid hook call“: Hooks werden nur im Rumpf der Komponente aufgerufen, während sie rendertDer Wechsel passiert, ein wenig späterNichts, useNavigate funktioniert nur in App

4. Im echten Shop öffnest du /product/5 und klickst auf „Neu laden“. Der Server antwortet 404. Was fehlt?

MemoryRouter / createMemoryHistory statt BrowserRouter / createWebHistoryEine Route „/product/:id“ in der TabelleDer Server muss für jede Adresse, die keine Datei ist, index.html liefern; dann wählt der Router im Browser die Seite

Prüfen

Lektion von vorn beginnen

Verwandte Lektionen

• Baut auf: Zustand · Abgeleiteter Zustand · Gemeinsamer Zustand: nach oben · Gemeinsamer Zustand
• Geht weiter in: Geschwindigkeit: wann eine Komponente neu rendert · Von der Sandbox zum Projekt · Das Schaufenster des Shops
• Aufgaben zum Thema: Eine ganze App