Comment gérer le routage dans React

Dans l'un de mes précédents tutoriels, nous avons vu comment utiliser React et JSX. Dans ce didacticiel, nous verrons comment commencer à configurer et à créer une application React. Nous allons nous concentrer sur la gestion du routage dans une application React en utilisant réagir-routeur.

Commencer

Commençons par lancer notre projet en utilisant Node Package Manager (npm).

mkdir reactRoutingApp cd reactRoutingApp npm init

Installez le nécessaire réagir et réact-dom bibliothèques dans le projet.

npm installer réagir réagir-dom --save

Nous allons utiliser Webpack module de module pour ce projet. Installer Webpack et serveur de développement webpack.

npm installer webpack webpack-dev-serveur --save-dev

Nous utiliserons Babel pour convertir la syntaxe JSX en JavaScript. Installez le paquet babel suivant dans notre projet.

npm installer --save-dev babel-core babel-loader babel-preset-réagir babel-preset-es2015

webpack-dev-server nécessite un fichier de configuration dans lequel nous définirons le fichier d'entrée, le fichier de sortie et le chargeur babel. Voici comment notre webpack.config.js le fichier va chercher:

module.exports = entrée: './app.js', module: chargeurs: [exclure: / noeud_modules / /: chargeur: 'babel-loader? presets [] = es2015 & presets [] = react'], sortie : nom du fichier: 'bundle.js'; 

Ensuite, nous allons créer app.html où l'application React sera rendue.

Créons le fichier de points d'entrée app.js pour notre application React.

importer Réagir de 'réagir'; importer render de 'react-dom'; const App = () => return ( 
'TutsPlus - Bienvenue dans React Routing Basic!'
 ) ; rendre( , document.getElementById ('app')); 

Comme on le voit dans le code ci-dessus, nous avons importé réagir et réact-dom. Nous avons créé un composant sans état appelé App qui retourne un titre. le rendre fonction rend le composant à l'intérieur de l'élément app dans le app.html page.

Commençons par le serveur Webpack. L'application doit être en cours d'exécution et afficher le message du composant..

webpack-dev-server

Pointez votre navigateur sur http: // localhost: 8080 / app.html et vous devriez avoir l'application en cours d'exécution.

Créer des vues de réaction

Nous sommes maintenant opérationnels avec notre application React. Commençons par créer quelques vues pour notre application de routage React. Pour rester simple, nous allons créer tous les composants dans le même app.js fichier.

Créons un composant principal appelé la navigation dans le app.js.

const Navigation = () => return ( 
  
 
'Accueil'
 
'Contact'
 
'Sur'
 
 
 ) ;

Au dessus La navigation composant, nous avons le titre de l'application et un menu nouvellement créé pour la navigation sur différents écrans de l'application. Le composant est assez simple, avec du code HTML de base. Allons-y et créons des écrans pour Contact et À propos de. 

const About = () => return ( 
 
'Bienvenue à propos!'
 
 ) ; const Contact = () => return ( 
 
'Bienvenue sur Contact!'
 
 ) ;

Nous venons de créer un composant pour rendre le Sur et Contact des écrans.

Connexion de vues à l'aide de react-router

Pour connecter différentes vues, nous allons utiliser réagir-routeur. Installez le réagir-routeur en utilisant npm.

npm install react-router --save

Importer la bibliothèque requise de réagir-routeur dans app.js.

importer Link, Route, Router de 'réagir-routeur';

Au lieu de spécifier le composant à restituer, nous allons définir différents itinéraires pour notre application. Pour cela, nous allons utiliser réagir-routeur. 

Définissons les itinéraires pour l’écran d’accueil, l’écran Contact et l’écran A propos de.

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

Lorsque l'utilisateur visite le / route, la La navigation composant est rendu, lors de la visite /sur la Sur le composant est rendu, et /contact rend le Contact composant.

Modifier le Sur et Contact écrans pour inclure un lien vers l'écran d'accueil. Pour les écrans de liaison, nous utiliserons Lien, qui fonctionne de manière similaire à la balise d'ancrage HTML.

const About = () => return ( 
 
'Bienvenue à propos!'
 'De retour à la maison' 
 ) ; const Contact = () => return ( 
 
'Bienvenue sur Contact!'
 'De retour à la maison' 
 ) ;

Modifier le La navigation composant pour inclure le lien vers les autres écrans à partir de l'écran d'accueil.

const Navigation = () => return ( 
  
 
'Accueil'
 
 'Contact' 
 
 'Sur' 
 
 
 ) ;

Enregistrez les modifications et redémarrez le Webpack serveur.

webpack-dev-server

Pointez votre navigateur sur http: // localhost: 8080 / app.html. L'application exécutant le routage de base devrait être implémentée..

Envelopper

Dans ce didacticiel, nous avons vu comment commencer à créer une application React et à connecter différents composants entre eux à l’aide de réagir-routeur. Nous avons appris à définir différents itinéraires et à les relier à l’aide de réagir-routeur. 

Avez-vous essayé d'utiliser réagir-routeur ou toute autre bibliothèque de routage? Faites-nous savoir vos pensées dans les commentaires ci-dessous.

Le code source de ce tutoriel est disponible sur GitHub.