31. Itinéraires et navigation dans React.js

React.js, une bibliothèque JavaScript permettant de créer des interfaces utilisateur, est un outil incroyablement puissant et flexible pour les développeurs front-end. L'une de ses fonctionnalités les plus utiles est le système de routage et de navigation, qui vous permet de créer des applications monopage (SPA) complexes et interactives. Ce chapitre expliquera comment configurer et utiliser les itinéraires et la navigation dans React.js.

Tout d'abord, il est important de comprendre ce que sont les itinéraires et la navigation. Dans une application web traditionnelle, la navigation se fait en changeant de page. Chaque fois que vous cliquez sur un lien, le serveur envoie une nouvelle page au navigateur. Avec React.js, cependant, nous pouvons créer des applications monopage où la navigation se fait sans recharger la page. Au lieu de cela, différents composants sont rendus en fonction de l'itinéraire actuel.

Pour commencer à travailler avec des routes dans React.js, vous devrez installer la bibliothèque 'react-router-dom'. Cette bibliothèque est une extension de React.js qui permet la création d'un système de routage dans nos applications. Vous pouvez l'installer à l'aide du gestionnaire de packages npm avec la commande suivante : 'npm install react-router-dom'.

Une fois la bibliothèque installée, vous pouvez commencer à configurer vos routes. Les routes sont configurées dans un composant spécial appelé « BrowserRouter », qui devrait envelopper l'ensemble de votre application. Dans « BrowserRouter », vous pouvez utiliser le composant « Route » pour définir vos itinéraires. Chaque "Route" possède une propriété "path" qui définit le chemin URL de la route et une propriété "component" qui définit le composant qui doit être rendu lors de l'accès à la route.

<NavigateurRouter>
  <Route path="/" composant={Accueil} />
  <Route path="/about" composant={À propos} />
  <Route path="/contact" composant={Contact} />
</NavigateurRouter>

Avec ce code, lorsque l'utilisateur accède à l'URL '/', le composant 'Home' est rendu. S'ils accèdent à « /about », le composant « About » est rendu, et ainsi de suite. Vous pouvez ainsi définir autant d'itinéraires que vous le souhaitez.

Pour naviguer entre les routes, vous pouvez utiliser le composant 'Link' de la bibliothèque 'react-router-dom'. Ce composant crée un lien qui, lorsqu'on clique dessus, modifie l'itinéraire actuel sans recharger la page. La propriété 'to' du 'Link' définit l'itinéraire vers lequel le lien doit naviguer.

<Lien vers="/à propos">À propos de</Lien>
<Lien vers="/contact">Contact</Link>

Avec ce code, lorsque l'utilisateur clique sur le lien « À propos », l'itinéraire devient « /about » et le composant « À propos » est rendu. De même, lorsqu'ils cliquent sur « Contact », l'itinéraire devient « /contact » et le composant « Contact » est rendu.

Une chose importante à noter est que « BrowserRouter » utilise l'historique du navigateur pour suivre l'itinéraire actuel. Cela signifie que le bouton de retour du navigateur fonctionnera comme prévu, revenant à l'itinéraire précédent.

De plus, « react-router-dom » fournit également un certain nombre d'autres fonctionnalités utiles, telles que des routes imbriquées, des routes paramétrées et des redirections. Les routes imbriquées vous permettent d'avoir des routes au sein des routes, ce qui est utile pour créer des interfaces complexes. Les itinéraires paramétrés vous permettent de transmettre des données via l'URL. Et les redirections vous permettent de rediriger l'utilisateur vers un itinéraire différent.

En résumé, le système de navigation et de routage React.js est un outil puissant qui vous permet de créer des applications complexes et interactives d'une seule page. Avec la bibliothèque 'react-router-dom', vous pouvez facilement configurer vos itinéraires et naviguer entre eux sans recharger la page. De plus, « react-router-dom » fournit un certain nombre d'autres fonctionnalités utiles pour améliorer davantage votre application.

Page suivante de lebook gratuit :

82Introduction à Vue.js

0 minutes