11. React Router v6 — routing po stronie klienta

React Router v6 — nawigacja w SPA

React Router umożliwia tworzenie aplikacji wielostronowych (SPA) z nawigacją po stronie klienta — bez przeładowania strony. Wersja 6 przyniosła nowe API: Routes/Route, useNavigate, useParams, zagnieżdżone trasy z Outlet.

Każda aplikacja React z więcej niż jednym widokiem potrzebuje React Router. To de facto standard routingu w ekosystemie React.

1. Wyjaśnić czym jest routing SPA i jak różni się od tradycyjnego
2. Opisać BrowserRouter, Routes, Route, Link, NavLink
3. Omówić dynamiczne trasy (useParams) i programatyczną nawigację (useNavigate)
4. Pokazać zagnieżdżone trasy z Outlet

1. Routing SPA vs tradycyjny — History API, bez przeładowania strony
2. BrowserRouter i Routes/Route — konfiguracja, element prop
3. Link i NavLink — deklaratywna nawigacja, active class w NavLink
4. useParams — /:id w URL i const { id } = useParams()
5. useNavigate — programatyczna nawigacja po formularzu/akcji

• Struktura minimalna

1. Wstęp — co to SPA, History API
2. Rozdział 1: Podstawy routingu — Router, Routes, Route, Link
3. Rozdział 2: Dynamiczne trasy i nawigacja — useParams, useNavigate
4. Rozdział 3: Zagnieżdżone trasy i praktyki
5. Podsumowanie
6. Bibliografia

Router to mapa aplikacji!

Pokaż strukturę tras jako drzewo URL — to najlepszy sposób na wyjaśnienie routingu. Każdy URL powinien mapować się na widok.