Le guide de l'auto-stoppeur de React Router v4: [match, emplacement, histoire] - vos meilleurs amis!

Hey! Bienvenue dans le guide de l'auto-stoppeur de React Router v4, partie II!

Maintenant que nous avons lancé le bal avec notre première petite application, concentrons-nous sur vos trois compagnons de voyage: match , lieu et histoire .

Que se passe-t-il si vous entrez dans le code de votre composant domestique et y mettez un console.log pour vérifier les accessoires?

Le routeur introduit dans votre composant les objets suivants:

Hou la la! D'où cela vient-il? ?

Eh bien, chaque vue, composant ou tout ce qui est enveloppé par Router a ces objets. fait son travail en tant que composant d'ordre supérieur et encapsule vos composants ou vues et injecte ces trois objets comme accessoires à l'intérieur.

Alors… pourquoi sont-ils là et quel usage puis-je en faire? ?

Ils seront vos meilleurs amis! Croyez-moi! ?

Rencontre

L' objet match contient des informations sur la correspond à l'URL.

  • params : (objet), paires clé / valeur analysées à partir de l'URL correspondant aux segments dynamiques du chemin
  • isExact : (boolean), true si l'URL entière correspondait (pas de caractères de fin)
  • path : (chaîne), le modèle de chemin utilisé pour correspondre. Utile pour créer des itinéraires imbriqués . Nous y reviendrons plus tard dans l'un des prochains articles.
  • url : (chaîne), la partie correspondante de l'URL. Utile pour créer des liens imbriqués.

Donc, dans le composant Home , nous avons cet objet de correspondance :

isExact est vrai parce que l'URL entière a été mise en correspondance, l' objet params est vide car nous n'avons rien passé dedans, le chemin et les valeurs de clé d' url sont égales confirmant que isExact est vrai.

Jetons maintenant un œil à la vue TopicList :

Rien de nouveau jusqu'à présent, même histoire que dans la vue d'accueil , montrant le chemin et l' url de TopicList .

Mais que faire si nous jetons un œil à TopicDetails ?

Ok, qu'avons-nous ici?

isExact continue d'être vrai car l'URL entière a été mise en correspondance. L' objet params apporte les informations de topicId qui ont été transmises au composant.

Faites attention à la façon dont le topicId est une variable.

Mais où prend-il la valeur Topic1 ?

Simple, vous l' appelez de manière explicite dans TopicList Links .

Vérifiez comment nous avons utilisé la correspondance pour la TopicList pour connaître son URL.

Ce lien pourrait être dynamique . Plus tard, nous ferons un exemple où vous créez un lien vers un chemin relatif où vous ne savez pas auparavant s'il s'agit de Topic1 ou Topic3520 .

Mais…

Dans quelle situation isExact est- il faux?

Eh bien… laissez-moi vous donner un exemple:

Dans cette situation, nous avons introduit la / HelloWorldSection dans l'URL du navigateur.

Ce qui se passe, c'est que le routeur ne connaît pas le chemin complet vers HelloWorldSection, donc il vous achemine jusqu'à l'endroit où il connaît le chemin.

isExact affiche false vous indiquant précisément que «l' URL entière ne correspond pas ».

C'est très utile, comme vous le verrez dès que vous commencerez à faire des SPA avec RRv4!

Juste pour terminer notre approche pour correspondre, vérifiez ceci:

Nous avons utilisé le match.params.topicId pour imprimer à l'écran le nom de notre sujet.

C'est l'une des utilisations les plus courantes de la correspondance .

Bien sûr, il a une multitude d'applications. Supposons que nous ayons besoin de récupérer une API avec ces informations topicId . ?

Emplacement

L' objet d' emplacement représente où se trouve l'application maintenant, où vous voulez qu'elle aille ou même où elle se trouvait.

Il se trouve également sur history.location mais vous ne devriez pas l'utiliser car il est mutable.

Un objet d' emplacement n'est jamais muté afin que vous puissiez l'utiliser dans les hooks de cycle de vie pour déterminer quand la navigation se produit. Ceci est vraiment utile pour la récupération de données ou les effets secondaires DOM .

Let's console.log (emplacement) dans la vue d'accueil :

Ne plongons pas beaucoup en profondeur et restons avec ses fonctionnalités simples.

Vous avez la clé / valeur du chemin .

Vous pouvez l'utiliser par exemple pour vérifier si le chemin d'accès a changé:

Vous pouvez ou à lui. Vous pouvez faire un history.push ou history.replace comme nous le verrons plus tard.

Vous pouvez créer un objet personnalisé et l'utiliser

  • history.push (locationX)

Vous pouvez également le transmettre et Composants.

Cela les empêchera d'utiliser l'emplacement réel dans l'état du routeur. Peut-être voulez-vous tromper un composant pour le rendre dans un endroit différent du vrai?

Assez de localisation maintenant…

Passons à l' histoire !

Histoire

L' objet historique vous permet de gérer et de gérer l'historique du navigateur dans vos vues ou composants.

  • length : (nombre), le nombre d'entrées dans la pile d'historique
  • action : (chaîne), l'action en cours (PUSH, REPLACE ou POP)
  • location : (objet), l'emplacement actuel
  • push (path, [state]) : (function), pousse une nouvelle entrée sur la pile d'historique
  • replace (chemin, [état]) : (fonction), remplace l'entrée actuelle sur la pile d'historique
  • go (n) : (fonction), déplace le pointeur dans la pile d'historique de n entrées
  • goBack () : (fonction), équivalent à go (-1)
  • goForward () : (fonction,) équivalent à go (1)
  • block (prompt) : (fonction), empêche la navigation

Alors, console.log, l' objet historique dans notre vue d'accueil et voyons ce qu'il montre:

D'accord, exactement ce à quoi nous nous attendions.

Cela nous dit que nous sommes arrivés ici avec une action PUSH , que la longueur de l'objet est de 40 (lorsque vous naviguez dans l' historique de votre application , elle passe à 50 et s'arrête là, en supprimant les entrées les plus anciennes et en conservant sa taille à chaque fois que l'application pousse une autre entrée d'historique dans l'objet).

Il nous donne les informations de localisation .

Là encore, l' objet historique est modifiable . Par conséquent, il est recommandé d'accéder à l' emplacement depuis les accessoires de rendu de Route , et non depuis history.location .

Cela garantit que vos hypothèses sur React sont correctes dans les hooks de cycle de vie.

Par exemple:

En règle générale, vous pouvez l'utiliser pour modifier le chemin de l'URL du navigateur.

Dans l'exemple ci-dessous, nous évitons et créez un bouton qui fait une poussée d'historique:

Bien sûr, vous pouvez l'utiliser pour déclencher le changement d'URL après la récupération de données ou des effets secondaires.

Il est confortable de l'utiliser au milieu de JSX où vous ne voulez pas appeler de composants. Vous pouvez simplement renvoyer une poussée d'historique et déclencher le routeur pour mettre à jour l'URL du navigateur.

Enfin et surtout

Je pense qu'à ce moment-là, vous avez déjà une bonne idée sur la façon d'utiliser la correspondance , l' emplacement et l' historique .

Je n'ai apporté aucune modification à notre passe-partout initial, alors n'hésitez pas à jouer avec dans le même repo fourni dans la partie 1 de ce guide.

05. Bibliographie

Pour rédiger cet article, j'ai utilisé la documentation de React Router que vous pouvez trouver ici.

Tous les autres sites que j'ai utilisés sont liés le long du document pour ajouter des informations ou fournir un contexte à ce que j'ai essayé de vous expliquer.

Cet article fait partie d'une série intitulée «Guide de l'auto-stoppeur sur React Router v4»

  • Partie I: Grok React Router en 20 minutes
  • Partie III: chemins récursifs, vers l'infini et au-delà!
  • Partie IV: config route, la valeur cachée de la définition d'un tableau de configuration d'itinéraire

? Merci beaucoup!