L'essentiel de React.js

Effectuer une redirection

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Utilisez le routeur pour effectuer des redirections vers un module en particulier. Cette pratique est très utile si vous devez rediriger après la validation d'un formulaire.
05:08

Transcription

On va parler de quelque chose d'extrêmement important. Quand vous allez développer votre routing, oui parce qu'on va développer du routing, c'est bien mais de temps en temps, on va devoir faire des redirections. Par exemple, j'ajoute un nouvel utilisateur, j'ai envie d'être tout de suite redirigé vers sa fiche. On n'a pas de formulaire pour ajouter des utilisateurs mais on va quand même pouvoir parler de la redirection. Pour faire de la redirection, vous allez utiliser un contexte qui s'appelle history. History, c'est l'historique de votre navigateur mais c'est aussi le système de routing qui est implémenté et qui est disponible absolument partout. Etant donné que votre système de routing est au-dessus de tout le monde, c'est-à-dire que c'est vraiment lui qui est rendu et ensuite c'est les paths qui sont compilés et qui vous sont présentés à l'écran, vous allez pouvoir bénéficier de cet historique absolument partout. Attention cela dit, il y a quelque chose à faire. Oui, il faut utiliser les props parce que c'est à l'intérieur des props qu'on va récupérer l'historique. Au même titre que la récupération des locations ou des routes params. C'est comme ça que ça marche. Alors maintenant, si j'ai envie de les récupérer par exemple, dans mon mainComponent. Je vais devoir faire pareil. Je vais devoir utiliser les props ici et bien sûr, les "pather" dans super. Quand je vais avoir fait ça, je vais pouvoir sans aucun problème faire un console.log de props, pour aller voir un peu ce qui se passe. On va recharger. Et on va se rendre compte qu'ici, on récupère notre super objet. On avait regardé un petit peu tout à l'heure dans cet objet, mais on ne s'était pas vraiment arrêté sur history. History c'est absolument tout ce dont vous allez avoir besoin pour naviguer. Ça vous permet de faire un goBack, un goForward, ça vous permet de savoir si actuellement ce composant est actif ou non. Ça nous permet également de faire un push. Le push permettra de pousser une nouvelle route et donc d'aller vers cette route. Vous pourrez également utiliser transitionTo qui vous permettra d'aller vers cette page avec une transition. Sachez qu'il existe des utilitaires pour faire de l'animation. Mais on ne va pas parler de ça, nous on va se concentrer sur la redirection. Alors redirection ça peut être un push mais ça peut être un transition. C'est absolument la même chose. Comment on va faire pour faire une redirection ? Très facilement. On va d'abord sur props récupérer directement history et puis une fois qu'on aura récupéré history on pourra tout simplement faire un push. Un push vers quoi ? Vers une route. Par exemple vers User. Si je le fais comme ça, on est bien d'accord qu'ici je le fais en brute force c'est-à-dire que, dès que je vais arriver sur la page du mainComponent, Je vais être envoyé automatiquement sur user. Ce n'est pas vraiment la meilleure façon de le faire et vous allez voir qu'en plus, comme ça, dans le constructeur, on n'a pas le droit. On va essayer quand même. On recharge et là, automatiquement on est envoyé sur la liste des utilisateurs. Avec un message d'erreur qui nous dit qu'on est en train d'utiliser un anti-pattern. Effectivement, un constructeur ne peut pas avoir d'effets de bord. Les effets de bord, ce sont les effets de bord sur un composant, parce que le constructeur doit attendre que tout soit terminé. Donc vraiment votre composant doit être monté, et pleinement fonctionnel avant de faire quoi que ce soit qui vienne perturber son fonctionnement et surtout son montage parce que là actuellement vous faites une redirection pendant le montage. Ça, il n'apprécie pas. Si vous avez une redirection un peu en brute force comme ça à faire, vous devrez automatiquement utiliser un évènement. Component WillMount. Alors on vous le donne ici. Ils sont sympas, ils vous donnent tout. Nous on va le mettre sur component willMount. Comme il nous demande de le faire, puis on va juste déplacer notre props.history et, attention, vous allez utiliser this. props. On ne va pas utiliser uniquement props mais this props. Ici on va enregistrer et on va recharger notre page et on va aller sur home. On verra bien qu'effectivement, quand je vais sur home, vous pouvez le voir dans la barre d'adresse je suis redirigé automatiquement sur la liste des utilisateurs. Ce n'est pas la meilleure façon de faire non plus. On ne va pas bloquer l'utilisateur mais vous voyez bien qu'effectivement pour faire une redirection on va utiliser ça. C'est quoi la différence si je fais une transition ? Je vais en faire un transitionTo comme ça, et puis on va recharger la page. On va se retrouver sur home. On verra qu'effectivement ici ça va être très très méchant. Pourquoi ? Parce qu'on va avoir beaucoup de problématiques qui vont s'engendrer. Tout simplement parce que le transitionTo ne s'utilise pas de la même manière il y a beaucoup de choses à voir avec. Donc si vous devez faire une redirection très simple, vous allez utiliser push qui permettra de pousser une route sur l'historique. C'est tout ce que vous devez savoir pour le moment. Après, peut-être que vous irez un peu plus loin. Attention, parce qu'on a breaké absolument toute la navigation. Ici c'est ultra simple. Quand vous avez fini de soumettre un formulaire, vous pouvez faire un push et puis vous redirigez vers une route, directement. Alors pensez-y, sur history vous trouverez tous les utilitaires qui vous permettent de travailler la navigation, de revenir en arrière, de pousser, de faire un peu ce que vous voulez. Ne le faites pas sur un évènement. Nous, on l'a fait pour l'exemple mais vous pouvez utiliser ça absolument partout. Il y a un petit truc à savoir quand même. Si vous voulez utiliser ça dans un sous-composant par exemple dans le addComponent, il faudra utiliser les props. Donc partout où vous devez utiliser la navigation et surtout ce qui provient de votre router, vous utiliserez les props et vous irez chercher les informations directement dessus.

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 !