In questa sezione, intraprenderemo un percorso pratico per costruire un sito web aziendale utilizzando React Router. Questo progetto offre un'esperienza pratica nell'implementazione del routing all'interno di un'applicazione React. Il sito web sarà composto da tre pagine: "Home", "About" e "Contacts". Ogni pagina avrà un proprio URL e analizzeremo come configurare le relative rotte.

Prima di entrare nei dettagli, esaminiamo una panoramica del progetto:

• Obiettivo del progetto: Creazione di un semplice sito web aziendale con tre pagine distinte utilizzando React Router per la navigazione;
• Struttura delle pagine: Il sito web includerà le seguenti pagine:
  • "Home" con il percorso: /;
  • "About" con il percorso: /about;
  • "Contacts" con il percorso: /contacts.
• Componenti React: Tutti i componenti React e gli stili per questo progetto sono predefiniti, consentendo di concentrarsi esclusivamente sulla funzionalità fornita da React Router;
• Code Sandbox: Sarà disponibile un Code Sandbox contenente il codice completo dell'applicazione. Si consiglia di esaminare attentamente il codice per comprendere i concetti fondamentali del routing.

L'illustrazione riportata di seguito mostra la funzionalità finale dell'applicazione.

Ecco il codice iniziale disponibile nel Code Sandbox:

Come lavorare con Code Sandbox