Modul de gestionare a rutei în reacție

Într-unul dintre tutorialele mele anterioare, am văzut cum să începem cu React și JSX. În acest tutorial, vom vedea cum să începeți să configurați și să creați o aplicație React. Ne vom concentra pe modul de gestionare a rutei într-o aplicație React folosind reacționează-router.

Noțiuni de bază

Să începem prin inițierea proiectului folosind Node Package Manager (npm).

mkdir reacțieRoutingApp cd reactRoutingApp npm init

Instalați cerința reacţiona și reacționează-dom bibliotecile din proiect.

npm instalează reacția react-dom --save

Vom folosi WebPACK modulul bundler pentru acest proiect. Instalare WebPACK și server de dezvoltare webpack.

npm instalare webpack webpack-dev-server -save-dev

Vom folosi Babel pentru a converti sintaxa JSX la JavaScript. Instalați următorul pachet babel în proiectul nostru.

npm instalare -save-dev babel-core babel-încărcător babel-preset-react babel-preset-es2015

WebPACK-dev-server necesită un fișier de configurare în care vom defini fișierul de intrare, fișierul de ieșire și încărcătorul babel. Iată cum ne webpack.config.js fișierul va arăta:

module.exports = entry: './app.js', modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [] = es2015 & presets [ : fișier: 'bundle.js'; 

Înainte vom crea app.html unde aplicația React va fi redată.

Să creăm fișierul punctului de intrare app.js pentru aplicația noastră React.

import Reacționează de la "reacționează"; import render de la "react-dom"; const App = () => retur ( 
'TutsPlus - Bine ați venit la React Routing Basic!'
 ); ; face( , document.getElementById ('app')); 

Așa cum am văzut în codul de mai sus, am importat reacţiona și reacționează-dom. Am creat o componentă apatridă numită App care returnează un titlu. face funcția redă componenta din interiorul elementului de aplicație în app.html pagină.

Să începem serverul webpack și aplicația ar trebui să ruleze și să afișeze mesajul din componentă.

WebPACK-dev-server

Punctați browserul la http: // localhost: 8080 / app.html și ar trebui să aveți aplicația să ruleze.

Crearea vederilor reactive

Acum suntem pregătiți de aplicația noastră React. Să începem prin crearea a două vizualizări pentru aplicația noastră de rutare React. Doar pentru a păstra simplu, vom crea toate componentele în interiorul aceleași app.js fişier.

Să creați o componentă principală numită navigare în app.js.

const Navigation = () => return ( 
  
 
'Acasă'
 
'A lua legatura'
 
'Despre'
 
 
 ); ;

În cele de mai sus Navigare , avem titlul aplicației și un meniu nou creat pentru navigarea pe diferite ecrane ale aplicației. Componenta este destul de simplă, cu cod HTML de bază. Să mergem înainte și să creăm ecrane pentru Contact și Despre. 

const Despre = () => return ( 
 
'Bine ați venit la Despre!'
 
 ); ; const Contact = () => return ( 
 
'Bine ați venit la contact!'
 
 ); ;

Tocmai am creat o componentă pentru a face Despre și a lua legatura ecrane.

Conectarea vizualizărilor Utilizând router-ul reactiv

Pentru a conecta diferite viziuni pe care le vom folosi reacționează-router. Instalați reacționează-router folosind npm.

npm instalează router-ul de reacție - salvează

Importați biblioteca necesară din reacționează-router în app.js.

importați Link, Route, Router de la "router-ul reactiv";

În loc să specificăm ce componentă să renderăm, vom defini diferite căi pentru aplicația noastră. Pentru asta vom face uz reacționează-router. 

Să definim rutele pentru ecranul inițial, ecranul de contact și ecranul Despre.

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

Când utilizatorul vizitează / rută, Navigare componenta devine randată, la vizită /despre  Despre componenta devine randată și /a lua legatura redă a lua legatura component.

Modificați Despre și a lua legatura pentru a include un link înapoi la ecranul inițial. Pentru legarea ecranelor, vom folosi Legătură, care funcționează în mod similar cu eticheta de ancorare HTML.

const Despre = () => return ( 
 
'Bine ați venit la Despre!'
 'Înapoi acasă' 
 ); ; const Contact = () => return ( 
 
'Bine ați venit la contact!'
 'Înapoi acasă' 
 ); ;

Modificați Navigare pentru a include link-ul către celelalte ecrane de pe ecranul de pornire.

const Navigation = () => return ( 
  
 
'Acasă'
 
 'A lua legatura' 
 
 'Despre' 
 
 
 ); ;

Salvați modificările și reporniți WebPACK Server.

WebPACK-dev-server

Punctați browserul la http: // localhost: 8080 / app.html și ar trebui să aveți aplicația care rulează cu rutarea de bază implementată.

Înfășurați-o

În acest tutorial, am văzut cum să începeți să creați o aplicație React și să conectați împreună componente diferite folosind reacționează-router. Am învățat cum să definim diferite rute și să le conectăm împreună folosind reacționează-router. 

Ați încercat să utilizați reacționează-router sau orice altă bibliotecă de rutare? Spuneți-ne gândurile dvs. în comentariile de mai jos.

Codul sursă din acest tutorial este disponibil pe GitHub.