Hoe om te gaan met routing in React

In een van mijn eerdere tutorials zagen we hoe we aan de slag konden met React en JSX. In deze zelfstudie zullen we zien hoe u aan de slag kunt gaan met het instellen en maken van een React-app. We zullen ons richten op het omgaan met routering in een React-app met reactie-router.

Ermee beginnen

Laten we beginnen met het initiëren van ons project met Node Package Manager (npm).

mkdir reactRoutingApp cd reactRoutingApp npm init

Installeer de vereiste Reageer en reactie-dom bibliotheken in het project.

npm install react-dom reageren - opslaan

We zullen gebruiken webpack modulebundelaar voor dit project. Installeren webpack en webpack-ontwikkelserver.

npm installeer webpack webpack-dev-server --save-dev

We zullen gebruik maken van Babel om de JSX-syntaxis naar JavaScript te converteren. Installeer het volgende babel-pakket in ons project.

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

webpack-dev-server vereist een configuratiebestand waarin we het invoerbestand, het uitvoerbestand en de babel loader definiëren. Hier is hoe onze webpack.config.js bestand ziet eruit:

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

Vervolgens maken we app.html waar de React-app wordt weergegeven.

Laten we het beginpuntbestand maken app.js voor onze React-toepassing.

import Reageren van 'reageren'; importeer render van 'react-dom'; const App = () => retourneren ( 
'TutsPlus - Welkom bij React Routing Basic!'
 ); ; maken ( , document.getElementById ('app')); 

Zoals te zien is in de bovenstaande code, hebben we geïmporteerd Reageer en reactie-dom. We hebben een stateless component gemaakt genaamd App die een titel retourneert. De geven functie maakt het onderdeel in het app-element in de app.html pagina.

Laten we de webpack-server starten en de app moet worden uitgevoerd en het bericht van de component worden weergegeven.

webpack-dev-server

Richt uw browser op http: // localhost: 8080 / app.html en u moet de app laten draaien.

Reactieweergaven maken

Nu zijn we aan de slag met onze React-applicatie. Laten we beginnen met het maken van een aantal weergaven voor onze React-routeringsapplicatie. Gewoon om het simpel te houden, we zullen alle componenten binnen dezelfde maken app.js het dossier.

Laten we een hoofdcomponent maken genaamd navigatie in de app.js.

const Navigatie = () => retour ( 
  
 
'Huis'
 
'Contact'
 
'Wat betreft'
 
 
 ); ;

In bovenstaande Navigatie component hebben we de app-titel en een nieuw gemaakt menu voor navigatie naar verschillende schermen van de app. Het onderdeel is vrij eenvoudig, met eenvoudige HTML-code. Laten we doorgaan en schermen maken voor contact en Info. 

const Over = () => retourneren ( 
 
'Welkom bij About!'
 
 ); ; const Contact = () => retourneren ( 
 
'Welkom bij contact!'
 
 ); ;

We hebben zojuist een component gemaakt om de Wat betreft en Contact screens.

Aanzichten verbinden Gebruik van react-router

Om verschillende weergaven te verbinden, maken we gebruik van reactie-router. Installeer de reactie-router met behulp van npm.

npm install react-router - opslaan

Importeer de gewenste bibliotheek van reactie-router in app.js.

importeer Link, Route, Router vanuit 'react-router';

In plaats van op te geven welk onderdeel moet worden weergegeven, definiëren we verschillende routes voor onze toepassing. Daar zullen we gebruik van maken reactie-router. 

Laten we de routes definiëren voor het startscherm, het scherm Contact en het scherm Info.

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

Wanneer de gebruiker de / route, de Navigatie component wordt weergegeven, bij bezoek /wat betreft de Wat betreft component wordt gerenderd, en /contact maakt het Contact bestanddeel.

Wijzig de Wat betreft en Contact schermen om een ​​link naar het startscherm weer te geven. Voor het koppelen van schermen zullen we gebruiken Link, die op een vergelijkbare manier werkt als de HTML-ankertag.

const Over = () => retourneren ( 
 
'Welkom bij About!'
 'Terug naar huis' 
 ); ; const Contact = () => retourneren ( 
 
'Welkom bij contact!'
 'Terug naar huis' 
 ); ;

Wijzig de Navigatie component om de link naar de andere schermen op te nemen vanaf het startscherm.

const Navigatie = () => retour ( 
  
 
'Huis'
 
 'Contact' 
 
 'Wat betreft' 
 
 
 ); ;

Sla de wijzigingen op en start de webpack server.

webpack-dev-server

Richt uw browser op http: // localhost: 8080 / app.html en u moet de app laten draaien met geïmplementeerde basisroutering.

Inpakken

In deze zelfstudie hebben we gezien hoe je moet beginnen met het maken van een React-app en het met elkaar verbinden van verschillende componenten reactie-router. We hebben geleerd om verschillende routes te definiëren en ze met elkaar te verbinden via reactie-router. 

Heb je geprobeerd het te gebruiken reactie-router of een andere routeringsbibliotheek? Laat het ons weten in de reacties hieronder.

Broncode van deze tutorial is beschikbaar op GitHub.