web-dev-qa-db-fra.com

Passer l'objet via Link dans le routeur React

Est-il possible de passer un objet via le composant Link dans react-router?

Quelque chose comme:
<Link to='home' params={{myObj: obj}}> Click </Link>

De la même manière que je passerais props du composant Parent à Child.

Si ce n'est pas possible, quelle est la meilleure façon d'y parvenir:
J'ai une application React + Flux, et je rends le tableau avec des données. Ce que j'essaie de faire, c'est quand je clique sur l'une des lignes, cela me prendrait à certains détails composant pour cette ligne. La ligne a toutes les données dont j'ai besoin, donc j'ai pensé que ce serait génial si je pouvais simplement les passer par Link.

L'autre option serait de passer le id de la ligne dans l'url, de le lire dans le composant details et de demander les données au magasin pour par ID.

Je ne sais pas quelle est la meilleure façon d'atteindre ce qui précède ...

reactjsreactjs-fluxreact-router
29
knowbody

Donc, ma conclusion finale sur cette question est que je n'y ai pas réfléchi correctement. Il me semblait naturel de simplement passer mes données via le Link pour pouvoir y accéder dans mon composant Child. Comme Colin Ramsay mentionné il y a quelque chose appelé state dans le Link mais ce n'est pas la façon de le faire. Cela fonctionnerait correctement lorsque les données sont passées par Link uniquement si l'utilisateur clique sur quelque chose et est dirigé vers le composant Child.

Le problème survient lorsque l'utilisateur accède au url qui est utilisé dans Link alors il n'y a aucun moyen d'obtenir les données.

Donc, la solution dans mon cas était de passer les paramètres ID dans Link puis de vérifier si mon Store a les données (l'utilisateur y accède via Link) puis obtenir ces données à partir du Store.

Ou si les données ne sont pas dans le Store appelez le action pour récupérer les données de l'API.

31
knowbody

Non, vous ne pouvez pas passer un objet dans params, donc je suis d'accord avec vous que votre meilleur plan est de passer l'id à un magasin, que le magasin émette un événement CHANGE, et demander aux composants de demander des informations au magasin.

12
Hal Helms

Il est possible de passer un objet via un lien. Ajoutez vos données dans une requête plutôt que des paramètres et stringifiez l'objet:

<Link to={{ 
  pathname: `/blog/${post.id}`, 
  query: {
    title: post.title, 
    content: post.content,
    comments: JSON.stringify(post.comments)
  } 
}}>Read More...</Link>

Ensuite, dans votre composant enfant, analysez la chaîne de retour dans un objet:

JSON.parse(this.props.comments)
8
Pixelomo

Ce n'est pas possible, vous devez transmettre quelque chose qui peut être stocké dans l'URL, comme un ID de chaîne. Vous utiliseriez alors cet ID pour effectuer une recherche de l'objet.

3
Colin Ramsay

Vous pouvez essayer de le sérialiser en JSON puis de le désérialiser du côté réception.

2
praetoriaen