Hur man hanterar routing i React

I en av mina tidigare tutorials såg vi hur vi började med React och JSX. I den här handledningen ser vi hur du börjar med att skapa och skapa en React-app. Vi fokuserar på hur du hanterar routing i en React app med reagerar-router.

Komma igång

Låt oss börja med att initiera vårt projekt med Node Package Manager (npm).

mkdir reageraRoutingApp cd-reaktionRoutingApp npm init

Installera det nödvändiga reagera och reagerar-dom bibliotek i projektet.

npm installera reagera reagera dom - save

Vi ska använda Webpack modulbuntaren för detta projekt. Installera Webpack och webpack utvecklingsservern.

npm installera webpack webpack-dev-server - save-dev

Vi använder Babel för att konvertera JSX-syntax till JavaScript. Installera följande babelpaket i vårt projekt.

npm installera - save-dev babel-core babel-loader babel-preset-reagera babel-preset-es2015

Webpack-dev-server kräver en config-fil där vi ska definiera inmatningsfilen, utdatafilen och babelhanteraren. Så här är vår webpack.config.js filen kommer att se ut:

module.exports = entry: './app.js', modul: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [] = es2015 och förinställningar [] = reagera : filnamn: 'bundle.js'; 

Nästa skapar vi app.html där React-appen kommer att bli gjord.

Låt oss skapa ingångspunktfilen app.js för vår React application.

Import Reakt från "reagera"; importera render från 'react-dom'; const App = () => retur ( 
'TutsPlus - Välkommen till React Routing Basic!'
 ); ; göra( , document.getElementById ('app')); 

Som framgår av ovanstående kod har vi importerat reagera och reagerar-dom. Vi skapade en statslös komponent som heter App som returnerar en titel. De göra funktionen gör komponenten inuti appelementet i app.html sida.

Låt oss starta webpackservern och appen ska springa och visa meddelandet från komponenten.

Webpack-dev-server

Peka din webbläsare till http: // localhost: 8080 / app.html och du ska få appen att köras.

Skapa reaktionsvyer

Nu är vi igång med vår React-applikation. Låt oss börja med att skapa ett par visningar för vår React routing-applikation. Bara för att hålla det enkelt skapar vi alla komponenter inom samma app.js fil.

Låt oss skapa en huvudkomponent som heter navigering i app.js.

const Navigation = () => returnera ( 
  
 
'Hem'
 
'Kontakta'
 
'Handla om'
 
 
 ); ;

I ovanstående Navigering komponent, vi har app titel och en nyskapad meny för navigering till olika skärmar av appen. Komponenten är ganska enkel, med grundläggande HTML-kod. Låt oss fortsätta och skapa skärmar för Kontakt och Om. 

const Om = () => retur ( 
 
'Välkommen till Om!'
 
 ); ; const Kontakt = () => retur ( 
 
'Välkommen till Kontakt!'
 
 ); ;

Vi har precis skapat en komponent för att göra Handla om och Kontakta skärmar.

Ansluta visningar med hjälp av reaktor-router

För att ansluta olika visningar använder vi oss av reagerar-router. Installera reagerar-router med användning av npm.

npm installera reaktor-router - spara

Importera det nödvändiga biblioteket från reagerar-router i app.js.

importera Länk, Rutt, Router från "Reaktor-router";

I stället för att ange vilken komponent som ska göras, definierar vi olika rutter för vår applikation. För det ska vi utnyttja reagerar-router. 

Låt oss definiera rutterna för startskärmen, kontaktskärmen och om skärmen.

göra(     , document.getElementById ('app'));

När användaren besöker / rutt, den Navigering komponent görs på besök /handla om de Handla om komponent blir gjord, och /kontakta gör det Kontakta komponent.

Ändra Handla om och Kontakta skärmar för att inkludera en länk tillbaka till startskärmen. För att länka skärmar, använder vi Länk, som fungerar på liknande sätt som HTML-ankaretiketten.

const Om = () => retur ( 
 
'Välkommen till Om!'
 'Tillbaka till hemmet' 
 ); ; const Kontakt = () => retur ( 
 
'Välkommen till Kontakt!'
 'Tillbaka till hemmet' 
 ); ;

Ändra Navigering komponent för att inkludera länken till de andra skärmarna från startskärmen.

const Navigation = () => returnera ( 
  
 
'Hem'
 
 'Kontakta' 
 
 'Handla om' 
 
 
 ); ;

Spara ändringarna och starta om Webpack server.

Webpack-dev-server

Peka din webbläsare till http: // localhost: 8080 / app.html, och du ska få appen att köras med grundläggande routing implementerad.

Wrapping It Up

I den här handledningen såg vi hur vi började med att skapa en React-app och ansluta olika komponenter tillsammans med reagerar-router. Vi lärde oss hur vi definierar olika vägar och länkar dem samman med reagerar-router. 

Har du försökt använda reagerar-router eller något annat routingbibliotek? Låt oss veta dina tankar i kommentarerna nedan.

Källkod från denna handledning finns på GitHub.