Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Paolo Dell'Aguzzo
  • Chi sono
  • Cosa offro
  • Portfolio e Carriera
    • Carriera
    • Portfolio
  • PRESS e Guest Post
  • Contatti
  • Blog
Set 26
routing ReactJS

ReactJS: come fare routing tra più pagine

  • 26/09/2017
  • Paolo Dell'Aguzzo
  • No Comments
  • Programmazione
  • react, reactjs, routing reactjs, single web application
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.

Development Category (English)728x90

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:

Deep Learning Specialization on Coursera
<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:

ReactJS login

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

Condividi:

  • Fai clic qui per condividere su Twitter (Si apre in una nuova finestra)
  • Fai clic per condividere su Facebook (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Tumblr (Si apre in una nuova finestra)
  • Fai clic qui per condividere su LinkedIn (Si apre in una nuova finestra)
  • Fai clic qui per condividere su Pinterest (Si apre in una nuova finestra)
  • Fai clic per condividere su WhatsApp (Si apre in una nuova finestra)
  • Fai clic per condividere su Telegram (Si apre in una nuova finestra)
  • Clicca per condividere su Skype (Si apre in una nuova finestra)
  • Fai clic qui per stampare (Si apre in una nuova finestra)

Correlati

  • Facebook
  • Twitter
  • Tumblr
  • Pinterest
  • Google+
  • LinkedIn
  • E-Mail
Paolo Dell'Aguzzo

About The Author

Sono sempre stato affascinato dal marketing e dall'informatica a tal punto di unire le due passioni :) Se ti piace l'articolo fammelo sapere in un commento :)

Related Posts

  • React, TypeScript e Redux: creazione delle prime pagine04/07/2018
  • ReactJS: le context API ufficiali, come usarle e cosa sono28/06/2018
  • ReactJS: il componente StrictMode27/06/2018
  • ReactJS: i nuovi metodi del lifecycle getDerivedStateFromProps e getSnapshotBeforeUpdate26/06/2018

Fammi sapere cosa ne pensi :) Annulla risposta

Impara ReactJS imparare react
I 10 + 1 Libri che Dovrebbe Leggere Ogni Programmatore libri programmatore
Newsletter

Seguimi su Facebook :)

Facebook Pagelike Widget
Impara React Native imparare react native
10 Cose per Stare Più Comodo in Ufficio stare più comodo in ufficio
Impara a Creare un Tema Wordpress imparare creare tema wordpress
Udemy I Migliori Corsi per Programmatori udemy corsi programmatori
UX: Perché la User Experience è Importante UX importante e cos'è
Metodologie Agili e Lean: Come migliorare la tua azienda metodologie agili
Libri per Imparare JavaScript Imparare JavaScript libri

Articoli recenti

  • I principali engine utilizzati per lo sviluppo di videogiochi
  • Dalla visione alla realtà: Lo sviluppo di videogiochi dal punto di vista di un programmatore
  • 8 consigli per migliorare la tua SEO Locale

Categorie

  • CSS
  • Interviste
  • Java
  • Lavoro
  • Normative
  • Personale
  • Programmazione
  • Strategia & Marketing
  • Tech
  • Web Design
  • Wordpress
Paolo Dell'Aguzzo
Programmatore Software - Marotta di Mondolfo, Pesaro e Urbino
P. IVA: IT02758450429
Mail: info@paolodellaguzzo.com
Via Litoranea, 284/C - Marotta (PU)
Privacy Policy
Cookie Policy
In qualità di Affiliato Amazon, ricevo un guadagno per ciascun acquisto idoneo
Amazon e il logo Amazon sono marchi registrati di Amazon.com, Inc. o delle sue affiliate
Programmatore Senigallia, Ancona - Siti web, app iOS e Android, gestionali ReactJS, React Native, Java, SQL, PL/SQL, Heroku

 

Caricamento commenti...