Comprendre le routage imbriqué dans React

React est une bibliothèque JavaScript construite par Facebook pour créer des interfaces utilisateur. Si vous débutez avec React, je vous recommanderais de lire l'un de nos tutoriels précédents sur l'utilisation de React. Dans ce didacticiel, nous verrons comment gérer le routage imbriqué dans une application Web React..

Configuration de l'application

Nous allons commencer par configurer notre application Web React. Créons un dossier de projet appelé ReactRouting. À l'intérieur ReactRouting, créer un fichier appelé app.html. Ci-dessous est la app.html fichier:

À l'intérieur de ReactRouting dossier, initialisez le projet à l’aide de Node Package Manager (npm).

npm init

Entrez les détails spécifiques au projet ou appuyez sur Entrer pour les défauts, et vous devriez avoir le package.json déposer à l'intérieur du ReactRouting dossier.

"name": "reactroutingapp", "version": "1.0.0", "description": "", "main": "app.js", "scripts": "test": "echo \" Erreur : aucun test spécifié \ "&& exit 1", "author": "", "license": "ISC"

Installez le réagir et réact-dom dépendances utilisant npm.

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

Installez le babel paquet en utilisant npm et enregistrez-le sur le package.json fichier.

npm installer --save-dev webpack-dev-serveur webpack babel-core babel-loader

babel des packages sont nécessaires pour transformer le code JSX en JavaScript. Créez un fichier de configuration webpack pour gérer les configurations de webpack. Voici comment webpack.config.js le fichier aurait l'air:

module.exports = entrée: './app.js', sortie: nom du fichier: 'bundle.js',, module: chargeurs: [exclude: / node_modules /, loader: 'babel-loader? presets [ ] = es2015 & préréglages [] = réagir ']

app.js est le fichier où notre code React résiderait. Créez un fichier appelé app.js à l'intérieur de ReactRouting dossier. Importer les bibliothèques de réactions requises dans app.js. Créez un composant appelé App avoir un div avec du texte. Rendez le composant en utilisant la méthode de rendu. Voici comment la base app.js le fichier aurait l'air:

import Réagir de 'réagir' importer rendre de 'réagir-dom' const App = () => return ( 
'TutsPlus - Bienvenue dans l'application de routage imbriquée'
 ) ; rendre((  ), document.getElementById ('app'))

Redémarrez le Webpack serveur de développement.

webpack-dev-server

Une fois le serveur redémarré, vous devriez pouvoir voir l’application React s'exécutant sur http: // localhost: 8080 /..

Gestion du routage dans React

Nous allons utiliser réagir-routeur mettre en œuvre le routage et le routage imbriqué. Tout d'abord, installez réagir-routeur dans notre projet.

npm install react-router --save

Maintenant nous avons réagir-routeur installé dans notre projet. Créons quelques vues pour implémenter le routage. À l'intérieur de app.js fichier, créer deux composants appelés vue1 et vue2. Voici à quoi ressemblerait le code:

const View1 = () => return ( 
'Bienvenue sur View1'
 ) ; const View2 = () => return ( 
'Bienvenue sur View2'
 ) ;

Créer un Menu composant à afficher Vue1 et Vue2 en cliquant. Voici à quoi ça ressemble:

const Menu = () => return ( 
 
 
'Accueil'
 
 'View1' 
 
 'View2' 
 
 
 );

Utilisons le routeur de réaction pour afficher la route par défaut pour notre application. Faire le Menu composant la route par défaut. Définissez également l’itinéraire pour le Vue1 et Vue2 Composants. Voici à quoi ça ressemble: 

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

Enregistrez les modifications ci-dessus et redémarrez le Webpack serveur. Le menu de navigation verticale doit être affiché à l'adresse http: // localhost: 8080 / webpack-dev-server /..

Essayez de cliquer sur le Vue1 et Vue2 liens, et il devrait naviguer vers les composants appropriés.

Routes imbriquées dans React

Nous avons déjà un App composant qui affiche le texte de l'en-tête. Supposons que nous voulions que le menu clique pour afficher la vue appropriée, mais que nous voulions qu’il soit rendu à l’intérieur du App composant. 

Nous voulons que le menu de navigation soit disponible sur toutes les pages. Pour ce faire, nous allons essayer d'imbriquer nos composants de réaction Vue1 et Vue2 à l'intérieur de App  composant. Donc chaque fois que le Vue1 est rendu, il est affiché à l'intérieur du App composant.

Maintenant, modifiez la configuration du routeur et placez le Vue1 et Vue2 route config à l'intérieur du App itinéraire de composant.

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

Modifier le App composant pour imbriquer le Menu composant à l'intérieur.

const App = () => return ( 
 
'TutsPlus - Bienvenue dans l'application de routage imbriquée'
  
 ) ;

Pour rendre les routes imbriquées à l'intérieur du App composant, nous ajouterons props.chenfants au App composant. Passer les accessoires comme argument de fonction à la App composant.

const App = (props) => return ( 
 
'TutsPlus - Bienvenue dans l'application de routage imbriquée'
  props.children 
 ) ;

Ajoutons aussi un Accueil composant de notre application.

const Home = () => return ( 
 
'Bienvenue à la maison !!'
 
 ) ;

Inclure le Accueil composant dans la liste des routes imbriquées.

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

Enregistrez les modifications ci-dessus et redémarrez le serveur. Vous devriez pouvoir voir l'application. Cliquez sur les éléments de menu énumérés, et chaque fois que vous cliquez dessus, ils doivent être imbriqués dans le App composant.

Envelopper

Dans ce tutoriel, vous avez vu comment implémenter le routage imbriqué dans une application React en utilisant réagir-routeur. Vous pouvez développer de petits composants indépendants, puis les utiliser pour créer des applications plus volumineuses. Ce qui rend React vraiment puissant, c'est de pouvoir coudre de petits composants dans de grandes applications.. 

React est en train de devenir l’une des plateformes de facto pour travailler sur le Web. Ce n’est pas sans ses courbes d’apprentissage, et il existe de nombreuses ressources pour vous tenir occupé. Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..

Le code source de ce tutoriel est disponible sur GitHub. Faites-nous savoir vos suggestions et réflexions dans les commentaires ci-dessous.