In questo articolo parleremo ancora del routing ReactJS. Il routing è ciò che ci permette di navigare tra le pagine che creiamo e questo ci permette di non rimanere sempre fermi nella home page.

Avevamo già trattato l’argomento in un articolo esterno alla guida: react-router con router, switch e template. Ne avevamo già parlato anche per la pagina home di questa web app in questo articolo. Vedremo comunque il routing per attaccare la nuova pagina di Login che costruiremo.

Routing ReactJS

Per prima cosa apri il file package.json del tuo progetto. Dovresti trovarti già la dipendenza react-router-dom installata. Se non la trovi potresti esserti perso questa guida che ti insegna ad installarla.

Creazione della pagina di Login

Dunque prima di andare avanti con il routing è necessario creare una pagina nuova diversa dalla home così da vedere questo nuovo utilizzo del router.

Entra nella cartella components e crea la cartella login con dentro il file login.js. Dunque il file login.js al momento lo lasciamo con qualche dato farlocco, io ho scritto questo codice:

import React from "react";
export default class Login extends React.Component{
   constructor(props){
      super(props);
   }
   render(){
      return(
          <div style={{marginTop:"100px"}}>
              <p>
                 Sono la pagina di login..!
              </p>
              <p>
                 Sono la pagina di login..!
              </p>
              <p>
                 Sono la pagina di login..!
              </p>
         </div>
      );
   }
}

Hai visto lo stile in linea sul <div>? Stiamo passando un oggetto ({}) con proprietà marginTop che ha valore 100px allo stile. Per passare un oggetto è necessario inserirlo tra parentesi graffe. Ecco perché le parentesi graffe sono doppie 🙂 . Un paio apri-chiudi per dichiarare di passare un oggetto ed un paio apri-chiudi per l’oggetto in sé.

In ReactJS lo stile in linea va quindi scritto come oggetto e le proprietà utilizzabili sono le stesse che già conosci per il css con la differenza che invece del “-“, vedi margin-top, le parole vanno attaccate utilizzando le lettere maiuscole, vedi marginTop. Il valore di una proprietà dell’oggetto di stile deve essere scritta come stringa.

Inseriamo Login nel Routing ReactJS

Dunque apri il file App.js. E’ il nostro file adibito al routing dell’applicazione già dalla guida sulla creazione della prima pagina web.

All’interno bisogna per prima cosa importare in alto la pagina di login:

import Login from "./components/login/login";

Dunque sotto al Route della pagina Home è necessario inserire:

<Route exact path='/login' component={Login}/>

Raggiungiamo la Login dall’header

Ci siamo quasi! Qualche piccola modifica all’header e poi abbiamo anche il collegamento alla pagina di login.

Apri il file header.js ed apporta le seguenti modifiche:

1. Cambia i tag href relativi ad home, what e who in modo tale da non mandarli più direttamente verso l’ancora (es. #home-top), ma mandandoli a “/#home-top”.
2. Il tag href relativo a Login modificalo inserendo “/login”.

Il primo passo è necessario perché altrimenti, nella pagina di login, saremmo andati a cercare il tag con id “home-top”. Ma questo e gli altri id sono presenti solo nella pagina home.

Vediamo il risultato

Come al solito posizionati da terminale nella cartella dell’applicazione, esegui npm start ed una volta che si apre l’applicazione clicca su login.

Si aprirà una pagina di questo tipo:

Cliccando su home, what e who verrai rimandando nella pagina home correttamente.

Conclusioni

Hai imparato qualcosa di nuovo sul routing ReactJS. Adesso lo utilizziamo per una pagina esterna alla home ed abbiamo infatti aggiunto una route nuova. Non c’è limite a quante routes puoi aggiungere. Vedremo in altre guide che potrai innestare le routes anche in altri modi e potrai creare anche altri template relativi solo ad alcune routes.

Nella prossima guida vedremo come chiamare un endpoint. Sarà un indirizzo che ci ritornerà delle informazioni in formato json riguardanti un utente.

Se vuoi continuare a seguire questa guida ti ricordo di non perdere di vista l’articolo Come creare una web app da zero. Inoltre se ti iscrivi alla newsletter non ti perderai i nuovi articoli. Mando da 1 a 4 mail al mese ricapitolando dove siamo arrivati con ogni guida. Con la newsletter hai anche accesso a libri ed ebook gratuiti, così come a coupon Udemy 🙂 .

Per dubbi o domande scrivimi nei commenti 🙂 .

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

Prossimo articolo della guida: ReactJS: state e setState

Commenti