L'essentiel de React.js

Mettre en place des paramètres query

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les query params sont fréquemment utilisés dans le domaine du web comme pour contrôler des filtres. Voyez comment les mettre en place.
04:30

Transcription

Il va peut-être vous arriver aussi d'avoir besoin, pour une application particulière, de passer des query params. On vient de voir le passage assez simple d'une propriété en fait. Donc on va récupérer des paramètres d'URL dans les props mais on va aussi peut-être, de temps en temps, avoir besoin ici, de passer des informations autres que la clé de token. Le key ici qu'on a qui est une key de rafraîchissement, qui est interne à react router, qui ne nous intéresse pas. On aura peut-être besoin de dire, par exemple, name ou alors display quelque chose, peu importe mais passer en fait des query params donc directement dans l'URL. Ça vous pouvez également le réaliser mais alors si vous avez besoin de passer des query params, dans la conception et dans la création d'une route comme ça, vous devrez passer par un format un tout petit peu différent. Je vous montre, ça va différer un tout petit peu de ce qu'on fait. D'abord ici, il faudra ouvrir à l'intérieur, un objet. A l'intérieur de votre déclaration, ce sera un objet. Le premier paramètre, ce sera le path name et on pourrait uniquement utiliser que ça. Alors ce que je vous conseille c'est, quand vous allez déclarer vos différentes routes, et ici les objets de routes, de les déclarer de cette façon. D'abord ça ne changera absolument rien et puis ça vous laissera la possibilité de passer des query params plus tard. Regardez ici si je bouge un petit peu, entre les liens, si je navigue, je ne vais pas avoir de problème, ça va fonctionner comme avant. Alors maintenant, qu'est-ce qui va différencier ? Tout simplement ici, je vais pouvoir passer un objet query. Alors le paramètre query de l'objet complet de la conception du routing, je vais pouvoir le renseigner. Donc, comment je fais pour le renseigner ? De toute façon, une query, ça va aussi être un objet. Alors vous allez voir que la c'est la fête au niveau des fermetures à la fin. Ce n'est pas très grave. Qu'est-ce qu'on pourrait passer ? On pourrait dire que, par exemple, ici je veux récupérer, ou non, la liste des tâches de l'utilisateur. Donc on pourrait utiliser un paramètre à l'intérieur de notre objet, à true ou à false. Ici je pourrais mettre getTasks avec un "s", à true ou à false. Imaginons que je le mette à true pour l'exemple, comme ça. Ce qui fait que maintenant, ce lien-là va comporter un paramètre query. Un query param. Je vais recharger la page et puis je vais recliquer sur le lien. Et regardez ce qui se passe tout en haut. Effectivement maintenant, en query params, j'ai un getTasks, égal true. Ça marche aussi si je le mets à false, ce n'est pas un problème. ici, je vais pouvoir récupérer l'information quand je vais cliquer. Et là, c'est à false. Alors vous ferez attention avec ça parce qu'effectivement il a l'impression de pas être sur le lien. C'est parce qu'on n'a pas cliqué dessus. Il n'y a pas de problème avec ça. Maintenant, c'est bien beau de pouvoir passer comme ça un paramètre mais comment est-ce que je vais le récupérer ? Souvenez-vous. Tout est passé en props. Oui et non. Alors les routes params, je l'ai dit c'est pour récupérer les paramètres qu'on a ajouté à une route. Et ça, c'est pas des querys. C'est des routes params. Ça n'a rien à voir. Donc on va faire un console.log ici et on va aller afficher les props. Comme on l'a déjà fait. On va se rendre compte qu'il faudra naviguer un petit peu si on veut retrouver nos query params. On va ouvrir l'objet, ici. Et puis, on va se rendre compte que, à l'intérieur de Location, qui se trouve là, on retrouve les querys et que maintenant c'est aussi un objet. Et ça c'est nickel parce qu'on va pouvoir travailler avec. Donc on récapitule, pour récupérer les querys qu'on a passé à l'intérieur ici, il va falloir aller chercher sur les props, location et query. Donc on va pouvoir les récupérer facilement, il suffit simplement de placer ici this.getTasks. On se créé une nouvelle propriété qui sera égale à props.location.query.getTasks. Là on va avoir un true ou un false. Alors si on fait ça, il faut aussi faire un petit console.log pour être certain que tout s'est bien passé. This, getTasks et on va vérfier que c'est ok, on a bien récupéré le query param. On recharge la page. En console.log, on a false. Effectivement, c'est vrai. C'est bien false. Maintenant, on va le mettre à true ici. On va recharger la page. Et normalement, on ne devrait plus avoir de problème, on devrait avoir du true. Et ici on a bien true. Vous voyez qu'ici c'est assez simple de fonctionner avec les query params. Les query params, c'est très souvent utilisé notamment vous allez par exemple avoir un tableau et vouloir faire un ordre sur les différentes colonnes. On pourrait passer tout un objet d'ordres ici. On pourrait passer des paramètres pour afficher/ne pas afficher certaines choses. Après, c'est un peu votre imagination qui va faire le reste. Mais vous savez comment on utilise pleinement les différents paramètres. Soit je les passe directement dans les routes ici et ça, c'est plutôt pour aller chercher quelque chose quelque part. Soit je prévois des query params que je vais pouvoir réutiliser plus tard et que je vais aller chercher directement sur l'objet location dans les props et sur query.

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
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 !