Una SPA (single page application) té un sol index.html. Si canviem de «pàgina» amb un estat i un if, la URL no canvia: no es pot compartir l'enllaç, el botó enrere del navegador no funciona i en recarregar tornem a l'inici. React Router fa que cada URL dibuixi un component.

Fem servir React Router 8, paquet react-router (el react-router-dom es va quedar a la versió 7), en mode declaratiu. <BrowserRouter> escolta la URL i embolcalla tota l'aplicació a main.tsx.

import { BrowserRouter } from 'react-router';

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

A App.tsx declarem quina URL dibuixa quin component.

<Routes>
  <Route element={<Disposicio />}>
    <Route index element={<Inici />} />
    <Route path="cataleg" element={<Cataleg />} />
    <Route path="producte/:id" element={<Producte />} />
    <Route path="contacte" element={<Contacte />} />
    <Route path="*" element={<NoTrobada />} />
  </Route>
</Routes>

• <a href> recarrega tota la pàgina i es perd l'estat. <Link to="/cataleg"> canvia la URL sense recarregar.
• <NavLink> és un Link que sap si està actiu: a className li passem una funció que rep { isActive }.
• end al NavLink de /: sense, l'enllaç d'inici surt actiu a totes les pàgines.
• <Outlet />: el lloc de la disposició on es dibuixa la pàgina filla.

export default function Disposicio() {
  const classe = ({ isActive }: { isActive: boolean }) => (isActive ? 'enllac actiu' : 'enllac');
  return (
    <div className="pagina">
      <nav>
        <NavLink to="/" end className={classe}>Inici</NavLink>
        <NavLink to="/cataleg" className={classe}>Catàleg</NavLink>
      </nav>
      <main><Outlet /></main>
    </div>
  );
}

• useParams(): els trossos variables de la ruta. Sempre arriben com a text: Number(id) per convertir-los.
• useNavigate(): navegar des de codi. navega('/carro'), navega(-1) (enrere), navega('/', { replace: true }).
• useSearchParams(): la part de la URL després de ?. Un cercador que viu a la URL es pot compartir.
• <Navigate to="/no-trobada" replace />: redirigeix mentre es dibuixa; replace evita que la pàgina dolenta quedi a l'historial.

const { id } = useParams();
const navega = useNavigate();
const producte = buscaProducte(Number(id));
if (!producte) return <Navigate to="/no-trobada" replace />;

const [parametres, setParametres] = useSearchParams();
const cerca = parametres.get('cerca') ?? '';