bannière de la page [ReactJs] Créer un système de navigation

[ReactJs] Créer un système de navigation

React router est un composant ReactJs qui va vous permettre d’afficher des composants en fonction d’une URL spécifique. Nous allons voir ensemble comment l’utiliser au sein de notre application pour créer un système de navigation. Pour notre exemple nous allons prendre la structure d’un site web classique. Voilà à quoi la structure de notre site va ressembler :

Schéma de notre site pour la navigation

 

Voilà notre composant principal :

[pastacode lang= »javascript » manual= »import%20React%2C%20%7B%20Component%20%7D%20from%20’react’%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%0A%20%20%20%0A%20%20render()%20%7B%0A%20%20%09return(%0A%09%09%3Cdiv%20className%3D%22main%22%3E%0A%09%09%09%3Cheader%3E%0A%09%09%09%09%3Cfigure%3E%3Cimg%20src%3D%22%2Fassets%2Fimg%2Flogo.jpg%22%3E%3C%2Ffigure%3E%0A%09%09%09%09%3Cnav%3E%0A%09%09%09%09%09%3Cul%3E%0A%09%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EAccueil%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EBlog%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EA%20propos%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EContact%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%09%3C%2Ful%3E%0A%09%09%09%09%3C%2Fnav%3E%0A%09%09%09%3C%2Fheader%3E%0A%09%09%09%3Cmain%3E%0A%09%09%09%09%3C!–%20Tout%20notre%20contenu%20–%3E%0A%09%09%09%3C%2Fmain%3E%0A%09%09%09%3Caside%3E%0A%09%09%09%09%3Cul%3E%0A%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EAccueil%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EBlog%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EA%20propos%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%09%3Cli%3E%3Ca%20href%3D%22%22%3EContact%3C%2Fa%3E%3C%2Fli%3E%0A%09%09%09%09%3C%2Ful%3E%0A%09%09%09%3C%2Faside%3E%0A%09%09%09%3Cfooter%3EA%26F%20D%C3%A9veloppement%3C%2Ffooter%3E%09%0A%09%09%3C%2Fdiv%3E%0A%09)%0A%20%20%7D%0A%7D%0A%0A%0Aexport%20default%20App%3B%0A » message= » » highlight= » » provider= »manual »/]

Le but de ce tutoriel est de voir comment rendre le contenu de la balise <main> dynamique. Pour cela, nous allons installer et importer le composant react-router :

Installation:

[pastacode lang= »markup » manual= »npm%20install%20–save%20react-router-dom » message= » » highlight= » » provider= »manual »/]

Importation:

[pastacode lang= »markup » manual= »import%20%7B%20BrowserRouter%20%7D%20from%20%22react-router-dom%22%3B » message= » » highlight= » » provider= »manual »/]

 

Créer notre navigation

Pour créer des liens avec react-router, il faut importer le composant NavLink et l’utiliser pour nos liens. Pour cela on va modifier notre header :

[pastacode lang= »markup » manual= »import%20%7B%20BrowserRouter%20as%20NavLink%20%7D%20from%20%22react-router-dom%22%3B » message= » » highlight= » » provider= »manual »/]

[pastacode lang= »markup » manual= »%3Cul%3E%0A%09%3Cli%3E%3CNavLink%20to%3D%22%2F%22%3EAccueil%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%3Cli%3E%3CNavLink%20to%3D%22%2Fblog%22%3EBlog%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%3Cli%3E%3CNavLink%20to%3D%22%2Fabout%22%3EA%20propos%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%3Cli%3E%3CNavLink%20to%3D%22%2Fcontact%22%3EContact%3C%2FNavLink%3E%3C%2Fli%3E%0A%3C%2Ful%3E » message= » » highlight= » » provider= »manual »/]

Quelques explications :

Ici nous avons remplacé les balises a par des link. la propriété « to » correspond a l’url vers lequel mène le lien.

Créer notre première page

Pour créer notre première page, nous avons besoin de créer notre premier composant. Pour cela, on créait un nouveau fichier qui s’appelle Accueil qui correspondra à notre page d’accueil :

[pastacode lang= »javascript » manual= »import%20React%2C%20%7B%20Component%20%7D%20from%20’react’%3B%0A%0Aexport%20default%20class%20Accueil%20extends%20Component%20%7B%0A%0A%20%20%20%0A%20%20render()%20%7B%0A%20%20%09return(%0A%09%09%3Cdiv%20className%3D%22main%22%3E%0A%09%09%09%3Cp%3EJe%20suis%20la%20page%20d’accueil%3C%2Fp%3E%09%0A%09%09%3C%2Fdiv%3E%0A%09)%0A%20%20%7D%0A%7D%0A%0A » message= » » highlight= » » provider= »manual »/]

Et sur notre fichier app.js, on importe le composant Accueil.js et l’affichage grâce au composant Route que nous avons besoin d’importer.

[pastacode lang= »javascript » manual= »import%20React%2C%20%7B%20Component%20%7D%20from%20’react’%3B%0Aimport%20%7BBrowserRouter%20as%20Router%2C%20NavLink%2C%20Route%7D%20from%20%22react-router-dom%22%3B%0Aimport%20Accueil%20from%20′.%2FAccueil’%3B%0A%0Aclass%20App%20extends%20Component%20%7B%0A%0A%20%20%20%0A%20%20render()%20%7B%0A%20%20%09return(%0A%09%09%3CRouter%3E%0A%09%09%09%3Cdiv%20className%3D%22main%22%3E%0A%09%09%09%09%3Cheader%3E%0A%09%09%09%09%09%3Cfigure%3E%3Cimg%20src%3D%22%2Fassets%2Fimg%2Flogo.jpg%22%3E%3C%2Ffigure%3E%0A%09%09%09%09%09%3Cnav%3E%0A%09%09%09%09%09%09%3Cul%3E%0A%09%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2F%22%3EAccueil%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2Fblog%22%3EBlog%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2Fabout%22%3EA%20propos%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2Fcontact%22%3EContact%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%3C%2Ful%3E%0A%09%09%09%09%09%3C%2Fnav%3E%0A%09%09%09%09%3C%2Fheader%3E%0A%09%09%09%09%3Cmain%3E%0A%09%09%09%09%09%3CRoute%20exact%20path%3D%22%2F%22%20component%3D%7BAccueil%7D%2F%3E%0A%09%09%09%09%3C%2Fmain%3E%0A%09%09%09%09%3Caside%3E%0A%09%09%09%09%09%3Cul%3E%0A%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2F%22%3EAccueil%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2Fblog%22%3EBlog%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2Fabout%22%3EA%20propos%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%09%3Cli%3E%3CNavLink%20to%3D%22%2Fcontact%22%3EContact%3C%2FNavLink%3E%3C%2Fli%3E%0A%09%09%09%09%09%3C%2Ful%3E%0A%09%09%09%09%3C%2Faside%3E%0A%09%09%09%09%3Cfooter%3EA%26F%20D%C3%A9veloppement%3C%2Ffooter%3E%09%0A%09%09%09%3C%2Fdiv%3E%0A%09%09%3C%2FRouter%3E%0A%09)%0A%20%20%7D%0A%7D%0A%0A%0Aexport%20default%20App%3B%0A » message= » » highlight= » » provider= »manual »/]

Quelques explications

Nous avons importé le composant NavLink pour notre navigation, et notre composant Accueil. Nous avons utilisé le composant « Route » afin d’afficher notre composant accueil. Si vous souhaitez afficher un composant pour la route « /blog » il faudra utiliser :

[pastacode lang= »markup » manual= »%3CRoute%20exact%20path%3D%22%2F%22%20component%3D%7BBlog%7D%2F%3E » message= » » highlight= » » provider= »manual »/]

Si vous souhaitez mettre des parametre (par exemple le slug ou l’id de votre article) vous pouvez faire comme ceci :

[pastacode lang= »markup » manual= »%3CRoute%20exact%20path%3D%22%2Fblog%2F%3Aid%22%20component%3D%7BBlog%7D%2F%3E » message= » » highlight= » » provider= »manual »/]

Si vous vous rendez à l’url suivante : http://localhost/blog/15 pour récupérer l’id 15, il faut le récupérer dans le props :

[pastacode lang= »javascript » manual= »var%20id%20%3D%20this.props.match.params.id » message= » » highlight= » » provider= »manual »/]

Il est important de comprendre le terme « exact ». Par exemple pour le blog, à l’url /blog/15, si vous ne mettez pas exact alors il affichera le composant à l’url /blog et /blog/:id car la base de l’url correspond.

 

Dans ce tutoriel nous avons utilisé le composant NavLink plutot que Link pour notre navigation. Le principal intéret est que NavLink ajoute un class « active » quand l’url correspond. (vous pouvez ajouter un terme exact comme le composant Route pour l’affichage de la classe active) Cela nous permet d’appliquer un style particulier quand le lien est actif.