WebApp Routing: Gestire più route nelle app react.js

Nelle applicazioni con React sembra di essere vincolati ad avere una unica URL per la nostra webapp, trattandosi di quello che tecnicamente si indica con SPA (single page app). In realtà esistono dei pacchetti che consentono di sfruttare la struttura a componenti di react per ottenere un comportamento tale per cui vengono gestiti URL differenti e per ogni URL viene mostrata nel client una vista differente.

Questo effetto viene ottenuto sfruttando il fatto che potendo leggere l’url richiesta sarà poi possibile decidere quali componenti visualizzare o meno, gestire i parametri contenuti nelle URL ed altre operazioni simili. Per ottenere questo possiamo utilizzare la libreria react-router.

Come primo step dobbiamo inizializzare il pacchetto nella nostra webapp con il solito

npm install react-router-dom

Nel file index.js dove è presente il nostro componente App dobbiamo prima di tutto importare alcuni componenti:

import {
 BrowserRouter as Router,
	Switch,
	Route,
	Link
} from "react-router-dom";

• Router è il componente che abilita il parsing delle URL e che consente di attivare il meccanismo di react-router.
• Switch con all’interno dei componenti Route consentirà poi di selezionare quale route seguire in relazione al path presente nell’url.
• Link si utilizza per creare dei link che sfruttano il meccanismo di react-router

il nostro componente App() diventa quindi

function App() {
return (
    <Router>
        <h1>titolo</h1>
        <Switch>

            <Route path="/vinyls">
                <VinylsList />
            </Route>
            <Route path="/authors">
                autori
            </Route>
            <Route path="/">
                home
            </Route>
        </Switch>
    </Router>
)
}

se l’url vale "/vinyls" ad esempio verrà mostrato a video il componente <VinylsList />.

Per il codice completo del progetto fai riferimento al Repository di GitHub