React-router
Comparé à Angular, framework JS complet, React apparaît comme un squelette autour duquel on peut ajouter des outils et librairies en fonction des besoins du projet.
Un des outils les plus essentiels à mon sens est un routeur, pour gérer les liens et l'historique de navigation des utilisateurs dans notre application.
De ce besoin, la communauté React a su proposer plusieurs solutions, dont une qui fait consensus : react-router. On verra dans un prochain article que si on intègre Redux pour gérer l'état des objets, react-router n'est pas forcément le plus adapté. Mais pour le moment, il fait très bien le job.
On commence par l'installer : npm i react-router --save
On ajoute d'autres composants, qui seront comme des pages visuellement :
components/Page1.js
components/Page2.js
components/NoMatch.js :
Rien de bien extraordinaire, mais là où ça va devenir intéressant c'est quand on va modifier la barre de menus et ajouter le routeur dans app.
layout/Header.js :
Ajouter ceci en ligne 3 :
Remplacer les liens NavItem par ceci :
La différence avec la version précédente de ce fichier est qu'on a modifié les liens href du menu.
Layout.js : Supprimer la ligne 5 :
import Home from './components/Home';
et remplacer la ligne <Home />
par
children
contient le composant qui sera appelé par react-router. En ce qui concerne les propriétés (this.props
), un élément fondamental de la philosophie React, on verra dans un autre article comment les gérer. Pour en savoir plus dès maintenant :
https://facebook.github.io/react/docs/multiple-components.html
app.js :
Le composant app
est celui qui est le plus modifié puisque c'est lui qui intègre le routeur et donc les routes.
Dans une application plus importante, les routes pourraient être importées depuis un autre fichier pour éviter de surcharger celui-ci.
Le router est connecté à l'API history du navigateur grâce à browserHistory
. Il utilise plusieurs routes (home
, page1
, page2
) héritant d'une route principale (/
).
On pourrait donc imaginer d'avoir des routes imbriquées telles que page1/souspage1/details de cette manière :
Un très bon article sur react-router : https://css-tricks.com/learning-react-router/
On remarque dans app.js une ligne avec <IndexRoute>
. C'est la manière de déclarer une route par défaut.
Pour résumer, par défaut (en tapant localhost:8000 donc), le routeur va chercher la route /
, c'est-à-dire le layout, mais comme IndexRoute
est précisé, il charge dans ce layout, le composant Home
.
Ensuite, si on navigue vers localhost:8000/page1 par exemple, le contenu de Page1
s'affichera dans le layout.
Si on navigue vers une url qui n'est pas prise en charge (par exemple localhost:8000/zzzz), le routeur affichera le composant NoMatch
.
Last updated