L'essentiel de React.js

Naviguer avec un lien

Testez gratuitement nos 1247 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Comme pour toute application, il faut des liens pour naviguer. Avec react-router, découvrez une façon particulière de les définir.
05:20

Transcription

Alors même s'il est très amusant de naviguer entre les pages, dans la barre d'adresse, comme ça, je vous avoue que si je dois faire ça tout le temps pour travailler, il y a un moment où ça risque de m'énerver un petit peu. Effectivement, on a la possibilité, de créer un menu avec des liens et de faire des liens un peu partout, vers des composants, au travers du router, c'est d'ailleurs à ça que ça sert. Comment vais-je faire pour faire des liens ? On pourrait se dire qu'on peut faire une petite div ici, pourquoi pas et puis à l'intérieur ici, on va venir câbler un A. Un A, c'est sympa. Un A c'est simple avec un href qui va pointer vers le "/" comme ça. Puis on va l'appeler home. On va recharger et on va avoir un problème. Puisqu'effectivement, ça ne va pas être rendu. Pourquoi ça va pas être rendu ? C'est quand même très bizarre. Parce qu'en fait le router va rendre ce qu'on lui demande. Les routes avec les composants, directement déjà tout mais il ne va pas faire de rendu de choses qui se trouvent à l'intérieur de lui. Non, tout ce qu'il connait ce sont les routes, uniquement, et les composants qu'on pourrait y relier. Donc ça, vous oubliez, ça ne marchera pas. Alors comment on va faire ? Le plus simple ce serait de créer, pourquoi pas, le menu directement dans un template. Par exemple, on pourrait venir mettre une div et puis comme ça, on aurait le lien. Alors ça, ça va fonctionner, oui et non. Presque. Pourquoi ça ne va pas fonctionner directement ? Parce que souvenez-vous, il faut un wrapper c'est-à-dire qu'il nous faut forcément une div ouvrante et fermante au-dessus de tous les autres. Il nous faut une seule div ouvrante et fermante qui peut regrouper plusieurs div ensuite. Donc ça va devenir un peu laborieux à déclarer mais on est plus ou moins obligé. Alors ça va fonctionner. Ça va fonctionner où ? Que sur le module Users. Si on n'est pas sur le module Users, ça ne marchera pas. Là par contre, ça marche. Mais est-ce que ça fonctionne vraiment ? Oui et non. C'est à dire que là, actuellement, si je clique sur home, je me rendrais compte que j'ai un rechargement complet de la page, je n'ai absolument pas le comportement attendu. Je vais vous le refaire, on va aller sur users, je vais cliquer sur home. Ça va recharger complètement le projet. Or, sur le routing en react, il n'y a pas de rechargement. Non c'est du live donc on n'a pas besoin de rechargement et on n'en veut pas. Ça va marcher mais en fait, oubliez, parce qu'on ne fera pas de A. On ne va pas utiliser ça comme ça. Non. On va utiliser une autre méthode. Si vous regardez dans la doc, que vous aurez ici, au niveau de React router, vous verrez qu'ils utilisent une balise spécifique qui s'appelle Link. Link to égal et ensuite on met le path. Alors, on va essayer ensemble. On va donc ici définir un link. Vous verrez qu'effectivement, il faut bien fermer aussi. Là ce sera to et à l'intérieur ici, ça ne va pas du tout être comme on a l'habitude de faire, c'est-à-dire une ouverture et une fermeture de guillemets mais c'est directement une déclaration. Attention vous allez devoir utiliser les simples guillemets penchés. C'est un peu particulier mais c'est obligatoire c'est comme ça que ça marche pour pouvoir créer un path vers une route. Quand vous aurez fait ça, vous enregistrerez. Vous retournerez sur votre application et vous rechargerez. Bien sûr, il faudra se rendre sur le module Users pour le voir en action. Je vais recharger la page pour qu'on soit sur quelque chose de propre et je vais cliquer sur home. Et regardez, la magie opère. Quand je suis ici, je clique, je n'ai aucun rechargement de page, ça va directement sur le bon module, et c'est nickel. La dernière amélioration serait de sortir cette partie-là, et d'en faire un module à part, qui, pourquoi pas, serait, un menu component. Comme ça, je l'aurai partout et je n'aurais pas de problème et je pourrai me déplacer. Pensez bien à faire ça à chaque fois, c'est extrêmement important de partitionner et de supprimer des bouts de code et d'en faire uniquement des touts petits bouts. Pourquoi ? Parce que vous allez devoir réutiliser, c'est ça l'idée en fait. Avec react, vous faites de la réutilisation sans arrêt. Donc vous êtes obligé, en fait, de venir créer des petits bouts, parce que c'est beaucoup plus simple à utiliser quand c'est en petits bouts et partitionné que quand vous utilisez de gros pavés, puis de toute façon, ce n'est pas réutilisable du tout. Donc là, on a juste une méthode de render. On a uniquement le menu component, c'est tout ce dont on a besoin et celui-ci, je vais venir l'afficher ici. J'en ai besoin comme ça, je vais simplement l'afficher là. Et, si je veux que ce soit utilisable aussi dans mon composant du dessus, je vais venir le mettre au dessus du h1. Et tant qu'on y est, on va rajouter un deuxième lien. On va mettre un lien comme ça vers Users. On peut faire un truc en français, utilisateurs, u-ti-li-sa-teurs, voila. Et là on va mettre, hop, accueil. [bruit de clavier] Le home ce n'est pas mal parce que, en fait home c'est très utilisé, tout le temps, et même si c'est un mot en anglais, c'est plutôt bien compris sur internet. Laissez-le à home, au final ce n'est pas trop mal. Donc, utilisateurs et home. Maintenant, on va recharger la page, donc logiquement on devrait pouvoir se déplacer facilement, entre home et utilisateurs. Regardez, c'est absolument génial, on peut se déplacer sans aucun problème, et ici ça devient beaucoup plus simple. Vous avez vu comment faire un lien, ce n'est pas très compliqué. Link, to, on donne le path qui a été défini, puis ça va naviguer. Qu'est-ce qui se passe si je donne un path qui n'existe pas ? Tout simplement ici, je ne vais pas pouvoir naviguer. En fait, je vais bien aller vers cette route mais il ne va rien se passer. C'est comme ça que ça marche, automatiquement, il ne se passera rien. Je ne vais même pas être redirigé par contre je suis bien sur le path. Ça ne change rien parce que vous n'avez pas de rechargement.

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 :
Spécial abonnés
Date de parution :27 oct. 2016

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 !