Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de React.js

Organiser les routes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour organiser les routes, il est possible de travailler sur des parents et des enfants. Créez une première route imbriquée.
05:13

Transcription

C'est sympa comme ça. On peut se balader sur notre application simplement en appuyant ici sur utilisateurs ou sur home. Ce n'est pas mal. Ce n'est pas suffisant. Selon moi, on pourrait encore améliorer le concept. Déjà, vous n'êtes pas obligé ici de mettre le "/". Le path par défaut c'est "/" ensuite ce qu'il y a derrière users. C'est relié sur UsersComponent. Ça marche très bien. Et puis enfin, vous pouvez aussi améliorer un petit peu le design parce que là, on voit bien que tous les liens sont collés les uns avec les autres. Ça ne le fait pas. Si on a envie de faire un truc sympa, on pourrait ici avoir une ul et des li. Là on aurait quelque chose d'un tout petit peu plus organisé. Personnellement, je préfère. C'est plus joli, c'est plus propre, et ça change rien au niveau du comportement. Surtout, ça laissera à notre graphiste l'opportunité de faire quelque chose de sympa. Mais j'aimerais aussi aller un peu plus loin. C'est-à-dire que j'aimerais pouvoir avoir ici une route qui me permette, après users, d'avoir un seul user par exemple. Donc ici j'aurai un seul utilisateur. Ce qui veut dire aussi que du coup je pourrais, pourquoi pas, avoir une route qui soit imbriquée dans l'autre. Déjà on va commencer à préparer ici le petit composant qui va aller avec le user. On va se faire un UserComponent qui lui va uniquement afficher un seul utilisateur qu'on lui passera plus tard mais vous verrez ça. Ça veut dire qu'à cet endroit-là, je vais avoir le détail de l'utilisateur et ici, je vais avoir, certainement, une liste des utilisateurs. Maintenant, il va falloir fixer la navigation. Comment je fais pour réaliser ça ? Alors d'abord, il va falloir qu'on utilise quelque chose que vous pourrez retrouver dans la documentation et que vous n'avez pas encore. C'est l'IndexRoute. Ce qu'on a ici en fait. Il va falloir qu'on importe l'IndexRoute parce qu'on ne l'a pas créé. On va se faire ici une variable IndexRoute, qui va être égale à React Routeur.IndexRoute. En fait vous le trouverez dessus directement. Alors n'oubliez pas la petite virgule si comme moi vous avez fait ici un bloc de déclaration de variables parce que ça risque d'avoir une incidence incroyable. En fait, ça ne marchera pas. Quand vous aurez fait ça avec l'IndexRoute, ici on va descendre tout en bas et on va commencer à travailler un petit peu notre imbrication. Quand vous êtes sur des paths qui ne sont pas ensemble, par exemple "/" et users, ce n'est absolument pas les mêmes, on créé à chaque fois des nouvelles lignes de route. Mais quand vous voulez travailler sur des routes imbriquées, pas besoin de tout retaper. Vous pourriez vous dire c'est pas grave, moi je vais faire user / user comme ça. C'est bien, pourquoi pas, mais ce n'est pas très bien organisé. Si vous avez envie d'organiser un petit peu mieux tout ça, vous pourrez simplement, comme ça, ouvrir et fermer mais pas sur la même ligne. Vous pouvez passer d'une balise auto-fermante et faire une vraie ouverture et une vraie fermeture. Ce qui fait qu'on va pouvoir faire de la route imbriquée. On va recopier cette route-là parce que là, à l'intérieur, ce sera de l'auto-fermant et on va simplement lui dire qu'ici on aura user. Et ce sera relié, non pas sur le MainComponent, mais sur le UserComponent, attention sans "s". En faisant ça, vous pourriez vous dire ça va fonctionner, c'est génial c'est super simple. Pas si simple que ça en vrai. Regardez, si je clique ici, je suis bien redirigé sur la route mais il ne se passe rien. Pourquoi il ne se passe rien ? Tout simplement parce que pour le moment en fait, ce composant-là vient casser le concept. Quand vous utilisez des routes imbriquées, vous commencez toujours par définir la route principale, et ensuite, les différentes imbrications en dessous, sur des lignes. Sauf pour la première. La première c'est-à-dire celle qui sera chargée par défaut, vous allez devoir utiliser notre fameux Indexroute qu'on a utlisé et qu'on a inséré au-dessus. L'Indexroute va vous permettre de définir quelle va être la route par défaut. Elle sera également composée d'un premier attribut qui sera uniquement le composant sur lequel vous voulez vous relier. C'est-à-dire UsersComponent. Donc concrètement, quand on fait de l'imbrication de route on a tout un pavé de déclarations de route qui commencent par le path principal, la route d'index sur laquelle on va aller en tout premier quand on va se rendre sur users avec un "s" et enfin, une route qui sera derrière users mais qui nous permettra de naviguer vers un autre component. Maintenant on va recharger cette page, et on va bien voir qu'on n'a rien pour le moment sur users user donc on va revenir au début. Sur utilisateurs, on a bien la liste des utilisateurs. Sur un seul utilisateur, on voit qu'on a un petit problème. Alors ça ne charge toujours pas. Pourquoi ? N'utilisez pas les paths, ça ne sert absolument à rien. Vous allez devoir, simplement ici, vous indexer uniquement sur des noms. Les noms de path, ce sera largement suffisant pour charger un template. Alors si vous mettez des "/", vous risquez d'avoir des problèmes. Donc oubliez les, ne les mettez jamais sauf quand vous allez faire les liaisons réelles. Quand vous êtes dans les lignes, vous allez référencer les vrais paths. Et quand vous serez sur les imbrications ou les déclarations, à part pour le premier, vous ne mettrez pas de "/". et ici vous aurez bien une navigation qui fonctionne. On peut aller sur la liste des utilisateurs, un seul utilisateur, la home, et on peut se déplacer proprement. Voilà comment on organise ses routes, avec reactRouter.

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Votre/vos formateur(s) :
Date de parution :27 oct. 2016
Durée :3h28 (49 vidéos)

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !