Forstå Nested Routing i React

React er et JavaScript-bibliotek bygget av Facebook for å bygge brukergrensesnitt. Hvis du er ny til å reagere, vil jeg anbefale å lese en av våre tidligere opplæringsprogrammer om å komme i gang med React. I denne opplæringen diskuterer vi hvordan du håndterer nestet ruting i et React-webprogram.

Sette opp appen

Vi starter med å sette opp vårt React-webprogram. La oss lage en prosjektmappe som heter ReactRouting. Innsiden ReactRouting, opprett en fil som heter app.html. Nedenfor er app.html fil:

Inne i ReactRouting mappe, initialiser prosjektet ved hjelp av Node Package Manager (npm).

npm init

Skriv inn de prosjektspesifikke detaljene eller trykk Tast inn for standard, og du burde ha package.json fil inne i ReactRouting mappe.

"navn": "reactroutingapp", "versjon": "1.0.0", "beskrivelse": "", "main": "app.js", "scripts": "test": "echo \" feil : ingen test oppgitt \ "&& exit 1", "forfatter": "", "lisens": "ISC"

Installer reagere og reagere-dom avhengigheter ved bruk av npm.

npm installere reagerer reagerer dom - save

Installer babel pakke med NPM og lagre den til package.json fil.

npm installere - save-dev webpack-dev-server web-pakke babel-core babel-loader babel-preset-reagerer babel-preset-es2015

babel Det kreves pakker for å omforme JSX-koden til JavaScript. Opprett en webpack-konfigurasjonsfil for å håndtere webpackkonfigurasjonene. Her er hvordan webpack.config.js filen ville se ut:

module.exports = entry: './app.js', output: filnavn: 'bundle.js',, modul: loaders: [ekskluder: / node_modules /, loader: 'babel-loader? ] = es2015 og forhåndsinnstillinger [] = reagere ']

app.js er filen der vår React-kode ville oppholde seg. Opprett en fil som heter app.js inne i ReactRouting mappe. Importer de nødvendige reaksjonsbibliotekene i app.js. Opprett en komponent som heter app ha en div med litt tekst. Gjenfør komponenten ved hjelp av gjengivelsesmetoden. Her er hvordan det grunnleggende app.js filen ville se ut:

importere React fra 'reagere' import render fra 'react-dom' const App = () => return ( 
'TutsPlus - Velkommen til React Nested Routing App'
 ); ; gjengi ((  ), Document.getElementById ( 'app'))

Start på nytt Webpack utviklingsserver.

Webpack-dev-serveren

Når serveren er startet på nytt, bør du kunne se React-appen som kjører på http: // localhost: 8080 /.

Håndtering av ruting i reaksjon

Vi skal gjøre bruk av reagere-router å implementere ruting og nestet ruting. Først installer reagere-router i prosjektet vårt.

npm installere reaktor-router - lagre

Nå har vi reagere-router installert i vårt prosjekt. La oss lage et par visninger for å implementere ruting. Inne i app.js fil, opprett to komponenter kalt view1 og view2. Slik ser koden ut:

const View1 = () => retur ( 
'Velkommen til View1'
 ); ; const View2 = () => retur ( 
'Velkommen til View2'
 ); ;

Lage en Meny komponent som skal vises view1 og view2 ved å klikke. Slik ser det ut:

const meny = () => retur ( 
 
 
'Hjem'
 
  'View1' 
 
  'View2' 
 
 
 );

La oss bruke reaksjonsrouteren til å vise standardruten for applikasjonen vår. Lage Meny komponer standard ruten. Definer også ruten for view1 og view2 komponenter. Slik ser det ut: 

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

Lagre endringene ovenfor og start på nytt Webpack server. Du bør ha vertikal navigasjonsmeny som vises på http: // localhost: 8080 / webpack-dev-server /.

Prøv å klikke på view1 og view2 koblinger, og det bør navigere til de aktuelle komponentene.

Nested Routes in React

Vi har allerede en app komponent som viser headerteksten. Anta at vi vil ha menyklikk for å vise riktig visning, men vi vil at den skal gjengis inne i app komponent. 

Vi vil at navigasjonsmenyen skal være tilgjengelig på alle sider. For å oppnå dette, vil vi prøve å neste våre reaksjonskomponenter view1 og view2 inne i app  komponent. Så når view1 er gjengitt, vises den inni app komponent.

Endre ruteren config og plasser view1 og view2 rutekonfigurasjon inne i app komponentrute.

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

Endre app komponent for å neste Meny komponent inne i den.

const App = () => retur ( 
 
'TutsPlus - Velkommen til React Nested Routing App'
  
 ); ;

For å gjøre de nestede ruter inne i app komponent, legger vi til props.children til app komponent. Passere i Rekvisitter som et funksjonsargument til app komponent.

const App = (rekvisitter) => retur ( 
 
'TutsPlus - Velkommen til React Nested Routing App'
   Props.children 
 ); ;

La oss også legge til en Hjem komponent til vår søknad.

const Hjem = () => retur ( 
 
'Velkommen hjem !!'
 
 ); ;

Inkluder Hjem komponent i den nestede rutelisten.

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

Lagre endringene ovenfor og start serveren på nytt, og du bør kunne se programmet. Klikk på menyelementene som er oppført, og hver når du klikker, skal du gjøre nestet inne i app komponent.

Pakke det opp

I denne veiledningen så du hvordan du implementerer nestet ruting i et React-program ved hjelp av reagere-router. Du kan utvikle små uavhengige komponenter og deretter bruke komponentene til å lage større applikasjoner. Å gjøre det mulig å stifte små komponenter i store applikasjoner er det som gjør React veldig kraftig. 

React blir en av de facto plattformene for å jobbe på nettet. Det er ikke uten sine læringskurver, og det er mange ressurser for å holde deg opptatt også. Hvis du leter etter flere ressurser for å studere eller bruke i arbeidet ditt, sjekk ut hva vi har tilgjengelig på Envato-markedet.

Kildekode fra denne opplæringen er tilgjengelig på GitHub. Gi oss beskjed om dine forslag og tanker i kommentarene nedenfor.