Routing lato client in React Router

In questa lezione esploreremo una componente importante delle applicazioni single-page (SPA) - il routing lato client. Questo tipo di routing ci permette di aggiornare l'URL nel browser senza richieste aggiuntive del documento al server.

Avvia l'applicazione che abbiamo creato nella lezione precedente. Apri il pannello dello sviluppatore e in esso la scheda 'Rete' (Network per Chrome). Dopo ogni click sui nostri link noi vediamo ogni volta una richiesta per il document. Cioè noi ogni volta chiediamo al server di caricare per noi il document.

Approfittiamo ora dei vantaggi di React Router, per liberarci da simili richieste. Per fare questo apriamo root.jsx della nostra applicazione e sostituiamo il tag a del markup con il componente Link. Per iniziare aggiungiamo la sua importazione:

import { Outlet, Link } from 'react-router-dom';

Ora sostituiamo i tag a con l'attributo href. Invece del frammento di codice:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Ora avremo il seguente codice:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Apriamo di nuovo la scheda 'Rete' sul pannello dello sviluppatore, nella barra degli indirizzi impostiamo il percorso root e aggiorniamo la pagina. Ora clicchiamo sui link e vediamo che il document è stato richiesto solo una volta durante il caricamento iniziale e ai click successivi non ci sono più richieste al server.

Prendi l'applicazione, creata da te nei compiti delle lezioni passate. Utilizzando i materiali della lezione, implementa in essa il routing lato client, modificando i tuoi link, come descritto nella lezione.