useNavigate & useParams

Wat zijn useNavigate en useParams?

Soms wil je niet met een Link navigeren, maar vanuit JavaScript (bijvoorbeeld na een button click). Daarvoor gebruik je useNavigate.

En als je naar een detail pagina gaat (bijvoorbeeld /products/3), dan wil je het ID uit de URL halen. Daarvoor gebruik je useParams.

Stap 1: Data Bestand Maken

Maak eerst (als je dat nog niet hebt) een bestand data.js in je src folder met je data:

// src/data.js
export const products = [
  { id: 1, name: "iPhone 15", price: 999, description: "Nieuwste iPhone" },
  { id: 2, name: "Samsung Galaxy", price: 899, description: "Android telefoon" },
  { id: 3, name: "Google Pixel", price: 799, description: "Pure Android" }
];

Stap 2: Folder Structuur Aanmaken

Maak de volgende folders en bestanden aan in je project:

src/
├── components/
│   └── Product.jsx         ← Component voor 1 product
├── Pages/
│   ├── Home.jsx            ← Home pagina met producten
│   └── ProductDetail.jsx   ← Detailpagina
├── data.js                 ← Data bestand
└── App.jsx                 ← Routes

Stap 3: Routes Aanmaken

Maak twee routes: één voor de home pagina en één voor de detail pagina.

// src/App.jsx
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Home from './Pages/Home';
import ProductDetail from './Pages/ProductDetail';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products/:productId" element={<ProductDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Stap 4: Product Component Maken

Maak nu het herbruikbare Product component. Dit component toont 1 enkel product en heeft een button om naar de detail pagina te gaan.

// src/components/Product.jsx
const Product = ({ product, onShowDetail }) => {
  return (
    <section>
      <h2>{product.name}</h2>
      <p>€{product.price}</p>
      <button onClick={() => onShowDetail(product.id)}>
        Meer info
      </button>
    </section>
  );
};

export default Product;

Wat gebeurt er in dit component?

• {product, onShowDetail} - Dit component krijgt 2 props binnen
• product - Het product object met id, name, price, description
• onShowDetail - Een functie die wordt aangeroepen bij klik op de button
• onClick={() => onShowDetail(product.id)} - Roep de functie aan met het product ID

Stap 5: Home Pagina met Producten

Op de home pagina tonen we alle producten. Voor elk product gebruiken we het Product component. Als je op de button klikt, ga je naar de detail pagina.

// src/Pages/Home.jsx
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { products } from '../data';
import Product from '../components/Product';

const Home = () => {
  const navigate = useNavigate();
  const [productList, setProductList] = useState(products);

  const goToDetail = (productId) => {
    navigate(`/products/${productId}`);
  };

  return (
    <section>
      <h1>Welkom bij onze winkel!</h1>
      <h2>Onze Producten</h2>
      
      {productList.map(product => (
        <Product
          key={product.id}
          product={product}
          onShowDetail={goToDetail}
        />
      ))}
    </section>
  );
};

export default Home;

Wat gebeurt er?

• const navigate = useNavigate() - Maak een navigatie functie
• import { products } from '../data' - Haal de data op uit data.js
• import Product from '../components/Product' - Import het Product component
• useState(products) - Zet de data in state
• productList.map(...) - Loop door alle producten
• <Product ... /> - Gebruik het Product component voor elk product
• product={product} - Geef het hele product object door als prop
• onShowDetail={goToDetail} - Geef de navigatie functie door als prop
• navigate(`/products/${productId}`) - Navigeer naar bijv. /products/1

Stap 6: Detail Pagina met useParams

Nu maak je de detail pagina. Deze pagina haalt het ID uit de URL en toont het juiste product.

// src/Pages/ProductDetail.jsx
import { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { products } from '../data';

const ProductDetail = () => {
  const { productId } = useParams();
  const navigate = useNavigate();
  const [productList, setProductList] = useState(products);
  
  // Zoek het juiste product
  const product = productList.find(p => p.id === Number(productId));

  if (!product) {
    return <div>Product niet gevonden!</div>;
  }

  return (
    <section>
      <button onClick={() => navigate('/')}>
        ← Terug naar home
      </button>
      
      <h1>{product.name}</h1>
      <p><strong>Prijs:</strong> €{product.price}</p>
      <p><strong>Beschrijving:</strong> {product.description}</p>
    </section>
  );
};

export default ProductDetail;

Wat gebeurt er?

• const { productId } = useParams() - Haal het ID uit de URL
• import { products } from '../data' - Haal de data op uit data.js
• useState(products) - Zet de data in state
• products.find(...) - Zoek het product met het juiste ID
• Number(productId) - URL parameters zijn strings, maak er een number van
• if (!product) - Check of het product bestaat
• navigate('/') - Terug button naar de lijst

Hoe werkt het? - De Complete Flow

1. Je gaat naar / (home pagina)
2. Home pagina laadt alle producten in
3. Voor elk product wordt een <Product /> component gerenderd
4. Je klikt op "Meer info" bij iPhone 15
5. Het Product component roept onShowDetail(1) aan
6. useNavigate brengt je naar /products/1
7. useParams haalt het getal 1 uit de URL
8. We zoeken het product met id: 1
9. We tonen alle info van dat product

Andere Voorbeelden

Navigeren naar home:

const navigate = useNavigate();

<button onClick={() => navigate('/')}>
  Naar home
</button>

Terug navigeren (zoals browser terug knop):

const navigate = useNavigate();

<button onClick={() => navigate(-1)}>
  Terug
</button>

Meerdere parameters in URL:

// Route: shop/:category/:productId
const { category, productId } = useParams();

// URL: /shop/electronics/5
// category is "electronics"
// productId is "5"

Veelgemaakte Fouten

const navigate = useNavigate();
// Error: useNavigate is not defined

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

const navigate = useNavigate();

const { productId } = useParams();
const product = products.find(p => p.id === productId);
// Werkt niet! "1" !== 1

const product = products.find(p => p.id === Number(productId));

<button onClick={navigate('/home')}>
  Home
</button>
// Navigeert meteen bij render!

<button onClick={() => navigate('/home')}>
  Home
</button>

// Route: products/:productId
const { id } = useParams();
// Undefined!

// Route: products/:productId
const { productId } = useParams();
// Werkt!

<Product product={product} />
// Error: Product is not defined

import Product from '../components/Product';

<Product product={product} />

Handy Tips