06. React Router v6

This content is not available in your language yet.

O czym jest ta prezentacja?

React Router v6

React Router umożliwia nawigację między widokami w aplikacji SPA bez przeładowywania strony. Wersja 6 przyniosła nowe API: Routes/Route, useNavigate, zagnieżdżone trasy. Kluczowe dla każdej aplikacji z wieloma stronami.

Kluczowe pytania do odpowiedzi

Czym jest routing w SPA? — Zmiana widoku w przeglądarce bez reload, URL aktualizowany przez JS
BrowserRouter vs HashRouter? — BrowserRouter używa History API (wymaga serwera), Hash używa #
Jak działa useParams? — Dostęp do parametrów trasy (/user/:id → { id: '42' })
useNavigate vs <Link>? — Programatyczna vs deklaratywna nawigacja

Zakres merytoryczny

Instalacja i konfiguracja — npm install react-router-dom, owinięcie BrowserRouter
Routes i Route — definiowanie tras, element prop
Link i NavLink — nawigacja deklaratywna, active class
useParams — dynamiczne parametry trasy (/product/:id)
useNavigate — programatyczna nawigacja (po submit formularza)

Wymagane elementy wizualne

Schemat

Drzewo tras aplikacji: / (strona główna), /products (lista), /products/:id (szczegóły), /cart (koszyk), * (404). Pokaż jak URL mapuje się na komponent.

Przykład kodu JSX

Pełna konfiguracja routera dla mini sklepu z listą produktów i stroną szczegółów produktu.

Warianty realizacji

BrowserRouter, Routes, Route, Link
Przykład: 3-stronicowa aplikacja
Schemat struktury tras

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Scenariusze i przykłady

Przykład 1 — Podstawowa konfiguracja routera

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Strona główna</Link>
        <Link to="/products">Produkty</Link>
        <Link to="/cart">Koszyk</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<ProductList />} />
        <Route path="/products/:id" element={<ProductDetail />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="*" element={<NotFound />} />
</Routes>
    </BrowserRouter>
  );
}

Przykład 2 — useParams i useNavigate

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

function ProductDetail() {
  const { id } = useParams();  // Pobiera :id z URL
  const navigate = useNavigate();
  const { data: product } = useFetch(`/api/products/${id}`);

  const handleAddToCart = () => {
    addToCart(product);
    navigate('/cart');  // Programatyczne przekierowanie po akcji
  };

  return (
    <div>
      <h1>{product?.name}</h1>
      <button onClick={handleAddToCart}>Dodaj do koszyka</button>
      <button onClick={() => navigate(-1)}>Wróć</button>
    </div>
  );
}

Wskazówki do wystąpienia

Schemat URL → komponent

Narysujcie adres URL w pasku przeglądarki i strzałką wskażcie który komponent się renderuje. To najprościej wyjaśnia routing.

Pokaż NavLink

NavLink automatycznie dodaje klasę active do aktywnego linku. Pokażcie jak stylować aktywny element nawigacji — to coś co każdy projekt potrzebuje.

Zasoby

React Router — dokumentacja Oficjalna dokumentacja React Router v6.

React Router — Tutorial Krok po kroku tutorial.

Do dzieła!

Routing to podstawa każdej SPA!

Każda aplikacja React z więcej niż jedną stroną potrzebuje React Router. Ten temat jest bezpośrednio potrzebny w projekcie semestralnym!