Ciao 🙂

In questo articolo ti voglio mostrare come implementare il routing su un’applicazione ReactJS. Se non sai come creare un’applicazione ReactJS puoi scoprire online l’utilizzo di NodeJS e di React. Se sai già qualcosa e vuoi imparare a deployare la tua applicazione su Heroku, leggi questo articolo.

Sei pronto? Vediamo come funziona il routing a partire da un progetto totalmente vuoto. Ci basteranno pochi file.

Primo passo

Per iniziare ho diviso la mia applicazione all’interno della folder “src” in “components” e “css”. I componenti iniziali App.jsx e la index.html si trovano subito sotto “src”.

Per procedere con il routing è necessario posizionarsi con il terminale nella cartella del progetto e scrivere:

npm install --save react-router-dom

Dunque hai installato la versione di react-router per l’utilizzo su browser (esiste anche la versione per react-native). Oggi, 6 Settembre 2017, la versione disponibile è la 4.2.2.

Il RouteComponent

Una volta installato fai partire Node lanciando heroku local o npm start o npm run start (per ricordarti cosa lanciare puoi guardare gli scripts all’interno del file package.json).

Dunque all’interno della cartella “components” crea la cartella “routing” e dunque crea il file “RouterComponent.jsx“.

Bene, in questo file andremo a scrivere le nostre routes. Utilizzeremo un routing di tipo Hash così da non andare in conflitto con eventuali endpoint sul server.

Scrivi questo codice in RouterComponent.jsx:

import React from "react";
import { HashRouter, Route, Switch} from 'react-router-dom';

import Home from '../home/Home';
import Test from '../test/Test';
import MainTemplate from '../templates/MainTemplate';

export default class RouterComponent extends React.Component{
 render(){ 
     return ( 
         <HashRouter> 
             <MainTemplate>
                 <Switch> 
                     <Route exact path='/' component={Home}/> 
                     <Route exact path='/test' component={Test}/> 
                 </Switch> 
             </MainTemplate> 
         </HashRouter>
      ); 
  }
}

Cosa abbiamo scritto?

Quello che abbiamo scritto è l’import dei componenti che ci servono. Come puoi vedere abbiamo tre componenti che dobbiamo creare noi. Il primo si chiama Home e conterrà un <div> con scritto “Ciao sono Home!”, poi c’è Test che contiene “Ciao sono Test!” ed infine il MainTemplate che conterrà il template di base.

Dunque nella function render andiamo a ritornare un HashRouter composto dal MainTemplate che a sua volta contiene uno Switch composto da 2 Route.  Lo Switch è un componente che serve per fare un match preciso delle routes. Il motivo del suo utilizzo ti sarà più chiaro in futuro, nel frattempo se sei curioso ti consiglio di leggere questa guida.

Dunque le 2 routes che abbiamo servono per far mostrare all’utente la Home e la pagina Test quando ci troviamo rispettivamente in “/” ed in “/test”.

Cosa vogliamo vedere

La maggior parte dei gestionali che ho dovuto costruire erano sempre strutturati in questo modo:

1. Header con logo e menù
2. Contenuto
3. Footer

Essendo che l’unica cosa variabile del gestionale è sempre stata il contenuto, mentre l’header ed il footer rispettavano sempre lo stesso template, ho sin da subito avuto l’esigenza di crearmi un template di base.

Di conseguenza il MainTemplate conterrà questo codice:

import React from "react";
export default class MainTemplate extends React.Component{
 render(){ 
      return( 
          <div>
              Ciao sono il main temp 
              <hr/> 
              {this.props.children} 
              <hr/> 
              Quì finisco..! 
          </div> 
        ); 
   }
}

Come puoi vedere ora non ci sono header e footer, ma sono sostituiti da “Ciao sono il main temp” ed “Quì finisco..!”. In mezzo viene renderizzato il contenuto tramite l’utilizzo di this.props.children. Questi children all’interno delle props sono esattamente i componenti che corrispondono alla route in cui ti trovi.

Nel nostro caso nella lista di figli avremo soltanto quello corrispondente all’url che abbiamo digitato. Senza l’utilizzo di exact nelle routes avremmo visto nel browser sia il componente relativo alla Home che quello relativo a Test.

Il risultato finale

A questo punto entra nel file di ingresso della tua applicazione, nel mio caso è App.jsx ed importa il RouteComponent. Dunque inseriscilo nella render (puoi renderizzare direttamente il componente RouteComponent passandolo alla function ReactDOM.render).

Il risultato che otteniamo da questa operazione è il seguente:

Prova a togliere lo switch ed osserva il comportamento. Dopo di che leva anche exact dalle routes ed osserva il risultato.

Conclusioni

In questo articolo hai visto come implementare il routing nella tua applicazione ReactJS. Nei prossimi articoli tratterò tanti altri temi per chiamate a server, scrittura e lettura da database e tanto altro ancora.

Non ti dimenticare di utilizzare questo tool per Chrome che ti permette di capire lo stato e le props ricevute di ogni componente della tua applicazione: clicca quì.

Se ti è piaciuto l’articolo seguimi su Facebook e Twitter oppure rimani sempre aggiornato con la newsletter (da 1 a 4 mail al mese!)