Nested Routing in React begrijpen

React is een JavaScript-bibliotheek die is gebouwd door Facebook voor het bouwen van gebruikersinterfaces. Als u nog geen ervaring hebt met React, raad ik u aan een van onze eerdere zelfstudies te lezen om aan de slag te gaan met React. In deze zelfstudie bespreken we hoe om te gaan met geneste routering in een React-webtoepassing.

De app instellen

We beginnen met het opzetten van onze React-webapplicatie. Laten we een projectmap maken met de naam ReactRouting. Binnen ReactRouting, maak een bestand aan met de naam app.html. Hieronder staat de app.html het dossier:

Binnen in de ReactRouting map, initialiseer het project met behulp van Node Package Manager (npm).

npm init

Voer de projectspecifieke gegevens in of druk op invoeren voor defaults, en je zou de package.json bestand in de ReactRouting map.

"name": "reactroutingapp", "version": "1.0.0", "description": "", "main": "app.js", "scripts": "test": "echo \" Fout : geen test opgegeven \ "&& exit 1", "author": "", "license": "ISC"

Installeer de Reageer en reactie-dom afhankelijkheden met behulp van npm.

npm install react-dom reageren - opslaan

Installeer de Babel pakket gebruiken NPM en sla het op in de package.json het dossier.

npm installeren --save-dev webpack-dev-server webpack babel-core babel-loader babel-preset-reageren babel-preset-es2015

Babel pakketten zijn vereist om de JSX-code in JavaScript te transformeren. Maak een webpack-configuratiebestand om de webpackconfiguraties af te handelen. Hier is hoe het webpack.config.js bestand zou er als volgt uitzien:

module.exports = entry: './app.js', output: filename: 'bundle.js',, module: loaders: [exclude: / node_modules /, loader: 'babel-loader? presets [ ] = es2015 & presets [] = reageren ']

app.js is het bestand waar onze React-code zich zou bevinden. Maak een bestand met de naam app.js binnen in de ReactRouting map. Importeer de vereiste reactieve bibliotheken in app.js. Maak een component genaamd App een div hebben met wat tekst. Render het onderdeel met behulp van de rendermethode. Hier is hoe de basis app.js bestand zou er als volgt uitzien:

import Reageren van 'reageren' importeren render uit 'react-dom' const App = () => retourneren ( 
'TutsPlus - Welkom bij de geneste routerings-app Reageren
 ); ; renderen ((  ), Document.getElementById ( 'app'))

Start de webpack ontwikkelserver.

webpack-dev-server

Nadat de server opnieuw is opgestart, kunt u de React-app bekijken die wordt uitgevoerd op http: // localhost: 8080 /.

Routering in reactie verwerken

We zullen gebruik maken van reactie-router om routering en geneste routering te implementeren. Installeer eerst reactie-router in ons project.

npm install react-router - opslaan

Nu hebben we reactie-router geïnstalleerd in ons project. Laten we een aantal weergaven maken om routering te implementeren. Binnen in de app.js bestand, maak twee componenten aan genaamd view1 en view2. Hier is hoe de code eruit zou zien:

const View1 = () => retourneer ( 
'Welkom bij weergave1'
 ); ; const View2 = () => retourneer ( 
'Welkom bij View2'
 ); ;

Maak een Menu component om weer te geven view1 en view2 op klikken. Hier is hoe het eruit ziet:

const Menu = () => retourneren ( 
 
 
'Huis'
 
  'View1' 
 
  'View2' 
 
 
 );

Laten we de reactrouter gebruiken om de standaardroute voor onze toepassing weer te geven. Maak de Menu component de standaardroute. Definieer ook de route voor de view1 en view2 componenten. Hier is hoe het eruit ziet: 

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

Sla de bovenstaande wijzigingen op en start de webpack server. U zou het verticale navigatiemenu moeten laten weergeven op http: // localhost: 8080 / webpack-dev-server /.

Klik op de view1 en view2 koppelingen en moet naar de juiste componenten navigeren.

Geneste routes in React

We hebben al een App component die de koptekst weergeeft. Stel dat we willen dat de menu-klik de juiste weergave weergeeft, maar we willen dat deze binnen de. Wordt weergegeven App bestanddeel. 

We willen dat het navigatiemenu op alle pagina's beschikbaar is. Om dit te bereiken, proberen we onze reactcomponenten te nesten view1 en view2 binnen in de App  component. Dus wanneer het view1 wordt weergegeven, het wordt weergegeven in de App bestanddeel.

Pas nu de routerconfiguratie aan en plaats de view1 en view2 route config binnen de App componentroute.

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

Wijzig de App component om het te nestelen Menu component erin.

const App = () => retourneren ( 
 
'TutsPlus - Welkom bij de geneste routerings-app Reageren
  
 ); ;

Om de geneste routes binnen de App component, we zullen toevoegen props.children naar de App component. Pass in rekwisieten als een functieargument voor de App bestanddeel.

const App = (rekwisieten) => retour ( 
 
'TutsPlus - Welkom bij de geneste routerings-app Reageren
   Props.children 
 ); ;

Laten we er ook een toevoegen Huis component van onze applicatie.

const Home = () => retour ( 
 
'Welkom thuis !!'
 
 ); ;

Omvat de Huis component in de geneste routelijst.

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

Sla de bovenstaande wijzigingen op en start de server opnieuw op, en u zou de applicatie moeten kunnen bekijken. Klik op de weergegeven menu-items en telkens wanneer erop wordt geklikt, wordt genest binnen de App bestanddeel.

Inpakken

In deze zelfstudie zag u hoe u geneste routering implementeert in een React-toepassing met reactie-router. U kunt kleine, onafhankelijke componenten ontwikkelen en vervolgens de componenten gebruiken om grotere toepassingen te maken. Door het mogelijk te maken om kleine componenten samen te voegen tot grote applicaties, is React echt krachtig. 

Reageren wordt een van de de facto platforms voor het werken op het web. Het is niet zonder zijn leercurves, en er zijn ook genoeg middelen om je bezig te houden. Als u op zoek bent naar extra bronnen om te studeren of te gebruiken in uw werk, kijk dan wat we beschikbaar hebben op de Envato-marktplaats.

Broncode van deze tutorial is beschikbaar op GitHub. Laat ons je suggesties en gedachten weten in de reacties hieronder.