Förstå nested routing in React

React är ett JavaScript-bibliotek byggt av Facebook för att bygga användargränssnitt. Om du är ny att reagera rekommenderar jag att du läser en av våra tidigare handledning om att komma igång med React. I denna handledning diskuterar vi hur du hanterar kapslade routing i en React-webbapplikation.

Ställa in appen

Vi börjar med att ställa in vår React-webbapplikation. Låt oss skapa en projektmapp som heter ReactRouting. Inuti ReactRouting, skapa en fil som heter app.html. Nedan är app.html fil:

  TutsPlus - React Nested Routing

Inuti ReactRouting mapp, initiera projektet med Node Package Manager (npm).

npm init

Ange de projektspecifika detaljerna eller tryck på Stiga på för standardinställningar, och du borde ha package.json filen inuti ReactRouting mapp.

"name": "reactroutingapp", "version": "1.0.0", "beskrivning": "", "main": "app.js", "scripts": "test": "echo \" fel : inget test specificerat \ "&& avsluta 1", "författare": "", "licens": "ISC"

Installera reagera och reagerar-dom beroenden med hjälp av npm.

npm installera reagera reagera dom - save

Installera babel paket med npm och spara den till package.json fil.

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

babel paket krävs för att omvandla JSX-koden till JavaScript. Skapa en webpack-konfigurationsfil för att hantera webpackkonfigurationerna. Här är hur webpack.config.js filen skulle se ut:

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

app.js är filen där vår React-kod skulle ligga. Skapa en fil som heter app.js inuti ReactRouting mapp. Importera de nödvändiga reaktionsbiblioteken i app.js. Skapa en komponent som heter App ha en div med lite text. Rendera komponenten med hjälp av renderingsmetoden. Så här är det grundläggande app.js filen skulle se ut:

importera Reakt från "reagera" import render från "react-dom" const App = () => returnera 'TutsPlus - Välkommen till React Nested Routing App'
 ); ; göra((  ), Document.getElementById ( 'app'))

Starta om Webpack utvecklingsserver.

Webpack-dev-server

När servern har startats om igen ska du kunna se React-appen som körs på http: // localhost: 8080 /.

Hantering av routing i reaktion

Vi kommer att använda oss av reagerar-router att genomföra routing och kapslade routing. Först installera reagerar-router i vårt projekt.

npm installera reaktor-router - spara

Nu har vi reagerar-router installeras i vårt projekt. Låt oss skapa ett par visningar för att genomföra routing. Inuti app.js fil, skapa två komponenter som heter view1 och view2. Så här ser koden ut:

const View1 = () => returnera ( 'Välkommen till View1'
 ); ; const View2 = () => retur ( 'Välkommen till View2'
 ); ;

Skapa en Meny komponent som ska visas view1 och view2 på att klicka. Så här ser det ut:

const Menu = () => returnera (   'Hem'
   'View1' 
   'View2' 
 
 
 );

Låt oss använda realtroutern för att visa standardrutten för vår applikation. Gör Meny komponera standardrutten. Definiera också rutten för view1 och view2 komponenter. Så här ser det ut:

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

Spara ovanstående ändringar och starta om Webpack server. Du bör ha den vertikala navigeringsmenyn som visas på http: // localhost: 8080 / webpack-dev-server /.

Försök att klicka på view1 och view2 länkar, och det ska navigera till lämpliga komponenter.

Nested Routes in React

Vi har redan en App komponent som visar rubriktexten. Antag att vi vill ha menyklicket för att visa rätt vy, men vi vill att den ska göras inuti App komponent.

Vi vill att navigeringsmenyn ska vara tillgänglig på alla sidor. För att uppnå detta ska vi försöka nesta våra reaktionskomponenter view1 och view2 inuti App komponent. Så när view1 återges, visas den inuti App komponent.

Ändra nu routerns konfiguration och placera view1 och view2 rutkonfiguration inuti App komponentväg.

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

Ändra App komponent för att bo på Meny komponent inuti den.

const App = () => retur (  'TutsPlus - Välkommen till React Nested Routing App'
  
 ); ;

Att göra de kapslade vägarna inuti App komponent, lägger vi till props.children till App komponent. Passa in rekvisita som ett funktionsargument till App komponent.

const App = (rekvisita) => retur (  'TutsPlus - Välkommen till React Nested Routing App'
  Props.children 
 ); ;

Låt oss också lägga till en Hem komponent till vår ansökan.

const Hem = () => returnera (  'Välkommen hem !!'
 
 ); ;

Inkludera Hem komponent i den nestade rutlistan.

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

Spara ovanstående ändringar och starta om servern, och du ska kunna visa programmet. Klicka på menyobjekten som listas, och var och en när du klickar ska göra nestad inuti App komponent.

Wrapping It Up

I denna handledning såg du hur du implementerar kapslade routing i en React-applikation med reagerar-router. Du kan utveckla små oberoende komponenter och sedan använda komponenterna för att skapa större applikationer. Att göra det möjligt att sticka upp små komponenter i stora applikationer är det som gör React riktigt kraftfullt.

React blir en av de faktiska plattformarna för att arbeta på webben. Det är inte utan sina inlärningskurvor, och det finns gott om resurser för att hålla dig upptagen också. Om du letar efter ytterligare resurser att studera eller använda i ditt arbete, kolla vad vi har tillgängligt på Envato-marknaden.

Källkod från denna handledning finns på GitHub. Låt oss veta dina förslag och tankar i kommentarerna nedan.

Koda