Come gestire il routing in React

In una delle mie precedenti esercitazioni, abbiamo visto come iniziare con React e JSX. In questo tutorial, vedremo come iniziare con la creazione e la creazione di un'app React. Ci concentreremo su come gestire il routing in un'applicazione React usando reagiscono-router.

Iniziare

Iniziamo iniziando il nostro progetto usando Node Package Manager (npm).

mkdir reactRoutingApp cd reactRoutingApp npm init

Installa il necessario reagire e reagire-dom biblioteche nel progetto.

npm install react react-dom --save

Useremo webpack module bundler per questo progetto. Installare webpack e server di sviluppo webpack.

npm installa webpack webpack-dev-server --save-dev

Faremo uso di Babel per convertire la sintassi JSX in JavaScript. Installa il seguente pacchetto babel nel nostro progetto.

npm installa --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015

webpack-dev-Server richiede un file di configurazione in cui definiremo il file di ingresso, il file di output e il caricatore babel. Ecco come il nostro webpack.config.js il file sarà:

module.exports = entry: './app.js', module: loaders: [exclude: / node_modules /, loader: 'babel-loader? preset [] = es2015 e preset [] = react'], output : nome file: 'bundle.js'; 

Ora creeremo app.html dove l'applicazione React verrà renderizzata.

Creiamo il file del punto di ingresso app.js per la nostra applicazione React.

import Reagire da "reagire"; import render da 'react-dom'; const App = () => return ( 
'TutsPlus - Benvenuto in React Routing Basic!'
 ); ; render ( , document.getElementById ('app')); 

Come visto nel codice sopra, abbiamo importato reagire e reagire-dom. Abbiamo creato un componente stateless chiamato App che restituisce un titolo. Il rendere funzione rende il componente all'interno dell'elemento app nel app.html pagina.

Iniziamo il server del webpack e l'app dovrebbe essere in esecuzione e visualizzare il messaggio dal componente.

webpack-dev-Server

Indirizza il tuo browser a http: // localhost: 8080 / app.html e dovresti avere l'app in esecuzione.

Creazione di viste di reazione

Ora siamo operativi con la nostra applicazione React. Iniziamo creando un paio di viste per la nostra applicazione di routing React. Per semplificare, creeremo tutti i componenti all'interno dello stesso app.js file.

Creiamo un componente principale chiamato navigazione nel app.js.

const Navigation = () => return ( 
  
 
'Casa'
 
'Contatto'
 
'Di'
 
 
 ); ;

In quanto sopra Navigazione componente, abbiamo il titolo dell'app e un menu appena creato per la navigazione su diversi schermi dell'app. Il componente è abbastanza semplice, con codice HTML di base. Andiamo avanti e creiamo schermi per Contatti e Informazioni. 

const About = () => return ( 
 
'Welcome to About!'
 
 ); ; const Contact = () => return ( 
 
'Benvenuto nel contatto!'
 
 ); ;

Abbiamo appena creato un componente per il rendering di Di e Contatto schermi.

Collegamento delle viste tramite react-router

Al fine di connettere diverse viste che useremo reagiscono-router. Installa il reagiscono-router usando npm.

npm install react-router --save

Importa la libreria richiesta da reagiscono-router nel app.js.

import Link, Route, Router da 'react-router';

Invece di specificare quale componente eseguire il rendering, definiremo percorsi diversi per la nostra applicazione. Per questo ci serviremo di reagiscono-router. 

Definiamo i percorsi per la schermata Home, la schermata dei contatti e la schermata Informazioni.

render (     , document.getElementById ('app'));

Quando l'utente visita il / percorso, il Navigazione componente viene reso, in visita /di il Di il componente viene reso, e /contatto rende il Contatto componente.

Modifica il Di e Contatto schermi per includere un collegamento alla schermata principale. Per il collegamento degli schermi, li useremo collegamento, che funziona in modo simile al tag di ancoraggio HTML.

const About = () => return ( 
 
'Welcome to About!'
 'Tornare a casa' 
 ); ; const Contact = () => return ( 
 
'Benvenuto nel contatto!'
 'Tornare a casa' 
 ); ;

Modifica il Navigazione componente per includere il collegamento alle altre schermate dalla schermata principale.

const Navigation = () => return ( 
  
 
'Casa'
 
 'Contatto' 
 
 'Di' 
 
 
 ); ;

Salvare le modifiche e riavviare il webpack server.

webpack-dev-Server

Indirizza il tuo browser a http: // localhost: 8080 / app.html e dovresti avere l'app in esecuzione con il routing di base implementato.

Avvolgendolo

In questo tutorial, abbiamo visto come iniziare con la creazione di un'app React e il collegamento di diversi componenti utilizzando reagiscono-router. Abbiamo imparato come definire percorsi diversi e collegarli insieme usando reagiscono-router. 

Hai provato a usare reagiscono-router o qualsiasi altra libreria di routing? Fateci sapere i vostri pensieri nei commenti qui sotto.

Il codice sorgente di questo tutorial è disponibile su GitHub.