Navigation zur Detailseite mit React Router

Die Produktliste steht – jetzt verbinden wir sie mit einer zweiten Ansicht: der Produktdetailseite, die wir ab Kapitel 10 mit allen Produktdaten füllen.

React Router in main.jsx einrichten

src/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 in App.jsx definieren

src/App.jsx

import { Routes, Route } from 'react-router-dom';
import ProductListPage from './pages/ProductListPage';
import ProductDetailPage from './pages/ProductDetailPage';

function App() {
  return (
    <Routes>
      <Route path="/" element={<ProductListPage />} />
      <Route path="/products/:sku" element={<ProductDetailPage />} />
    </Routes>
  );
}

export default App;

:sku ist ein dynamischer Routen-Parameter – Magentos SKU eignet sich hier GUT als URL-Bestandteil, da sie im Gegensatz zu einer internen Datenbank-ID auch außerhalb der App eine sprechende, stabile Kennung ist.

src/components/ProductCard.jsx

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

function ProductCard({ produkt }) {
  const navigate = useNavigate();

  return (
    <li onClick={() => navigate(`/products/${produkt.sku}`)}>
      {produkt.name} — {produkt.price} €
    </li>
  );
}

export default ProductCard;

ProductListPage.jsx: ProductCard nutzen

src/pages/ProductListPage.jsx

import { useEffect, useState } from 'react';
import { fetchProducts } from '../api/magentoApi';
import Pagination from '../components/Pagination';
import ProductCard from '../components/ProductCard';

function ProductListPage() {
  const [produkte, setProdukte] = useState([]);
  const [seitenAnzahl, setSeitenAnzahl] = useState(1);
  const [aktuelleSeite, setAktuelleSeite] = useState(1);
  const [ladend, setLadend] = useState(true);

  useEffect(() => {
    setLadend(true);
    async function laden() {
      const ergebnis = await fetchProducts({ seite: aktuelleSeite });
      setProdukte(ergebnis.produkte);
      setSeitenAnzahl(ergebnis.seitenAnzahl);
      setLadend(false);
    }
    laden();
  }, [aktuelleSeite]);

  if (ladend) {
    return <p>Lade Produkte...</p>;
  }

  return (
    <div>
      <h1>Produkte</h1>
      <ul>
        {produkte.map((produkt) => (
          <ProductCard key={produkt.sku} produkt={produkt} />
        ))}
      </ul>
      <Pagination
        aktuelleSeite={aktuelleSeite}
        seitenAnzahl={seitenAnzahl}
        onSeiteWechseln={setAktuelleSeite}
      />
    </div>
  );
}

export default ProductListPage;

pages/ProductDetailPage.jsx: vorläufiges Grundgerüst

Damit die Route aus diesem Kapitel funktioniert, legen wir bereits ein Grundgerüst an – Kapitel 10 füllt es mit den ECHTEN Produktdaten:

src/pages/ProductDetailPage.jsx

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

function ProductDetailPage() {
  const { sku } = useParams();

  return <p>Details für SKU: {sku}</p>;
}

export default ProductDetailPage;

Tipp: Klicken Sie jetzt in der laufenden App auf ein Produkt – die URL sollte zu /products/IHRE-SKU wechseln und die noch simple Detailseite die SKU aus der URL korrekt anzeigen. Genau dieser Datenfluss (Klick → URL ändert sich → useParams() liest die SKU) ist die Grundlage für Kapitel 10.

Navigation zur Detailseite mit React Router

Navigation zur Detailseite mit React Router

React Router in main.jsx einrichten

Routen in App.jsx definieren

components/ProductCard.jsx: klickbare Produktkarte

ProductListPage.jsx: ProductCard nutzen

pages/ProductDetailPage.jsx: vorläufiges Grundgerüst