Ora che abbiamo avvolto la nostra app con BrowserRouter per abilitare il routing, il passo successivo è specificare le rotte (percorsi) che la nostra app includerà. Queste rotte determinano la struttura generale dell'applicazione e controllano quale contenuto viene visualizzato in base all'URL.

React Router fornisce due componenti essenziali per la definizione delle rotte: Routes e Route. Il componente Routes funge da contenitore per tutte le definizioni delle rotte, mentre il componente Route rappresenta una specifica configurazione di rotta.

Ecco la sintassi per definire le rotte:

<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>

In questa struttura:

• <path_value>: Specifica la configurazione dell'URL per la rotta;
• <component_to_render>: Determina il componente da visualizzare quando un utente naviga verso quel percorso specifico.

Esempio

Applichiamo questo concetto al nostro progetto. Apri il file App.jsx e importa i componenti Routes e Route dalla libreria react-router-dom:

import { Routes, Route } from "react-router-dom";

All'interno dell'istruzione return del componente App, definisci le rotte per la nostra applicazione:

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};

Spiegazione del codice:

• Riga 4, 8: <Routes>: Questo componente funge da contenitore per la definizione delle rotte nell'applicazione, agendo come componente genitore per le singole definizioni di rotta;
• Riga 5: <Route>: Rappresenta una definizione di rotta. Specifica che quando il percorso dell'URL corrisponde a /, viene renderizzato il componente <HomePage />;
• Riga 6: <Route>: Definisce un'altra rotta. Quando il percorso dell'URL corrisponde a /about, viene renderizzato il componente <AboutPage />;
• Riga 7: <Route>: Definisce un'altra rotta. Quando il percorso dell'URL corrisponde a /contacts, viene renderizzato il componente <ContactsPage />.