web-dev-qa-db-fra.com

Passage de valeurs via React-Router v4 <Link />

Question: Comment puis-je passer un prop ou une valeur unique, comme un id, à travers le composant Link de React-Router, et l'attraper sur le noeud final?

C’est ce que je veux dire: disons que nous sommes à la page/a. Le lien mènera l'utilisateur vers/b. En tant que tel <Link to='/b'>. Maintenant, je dois passer un id dans le lien, de/a, à/b.

<Link to='/b' params={_id}>blah blah</Link>

L'identifiant que je tente de transmettre est la propriété d'un objet dans lequel le composant Link est imbriqué.

J'ai trouvé cette syntaxe params={} dans un autre thread StackOverflow. Mon code compilé sans rupture, cela signifie donc probablement que cela a fonctionné? Cependant, je ne suis pas sûr de savoir comment récupérer cette valeur transmise sur le noeud final.

Toute aide sera fortement appréciée.

reactjshyperlinkreact-router
34
jsdev17

Passer les accessoires

Vous pouvez transmettre des accessoires arbitraires à une route via l'objet state:

<Link to={{ pathname: '/route', state: { foo: 'bar'} }}>My route</Link>

Vous pouvez ensuite accéder à l’objet state à partir de votre composant:

const {foo} = props.location.state

console.log(foo) // "bar"

Paramètres de passage

Configurez votre chemin de route pour accepter les paramètres nommés (:id):

<Route path='/route/:id' exact component={MyComponent} />

Ensuite, vous pouvez passer des paramètres d'URL tels que les identifiants dans votre lien to:

<Link to={`route/foo`}>My route</Link>

Vous pouvez accéder au paramètre dans votre composant via l'objet match:

const {id} = props.match.params

console.log(id) // "foo"

Sources

90
Miguel Mota

Pour transmettre des données via le composant Link, vous souhaiterez peut-être simplement accepter un paramètre sur le lien réel.

<Link to={`/b/${_id}`}>blah blah</Link>

et dans la Route, vous définissez quelque chose comme ça

<Route path="b/:id" name="routename" component={foo}></Route>

Vous pouvez ensuite accéder au paramètre de la nouvelle route via this.props.match.params.id

Si vous ne voulez vraiment pas que votre identifiant soit sur l'itinéraire réel, cela devient un peu plus gênant.

7
Christopher Messer

Si vous voulez envoyer plus d'un paramètre par une route, vous pouvez le faire comme ceci.

1. élément de liaison

<Link to={`/exchangeClicked/${variable1} ,${variable2},${variable3}`} >Click
</Link>

2.Configurez le chemin de votre route pour accepter ces paramètres

<Route
      exact
      path="/exchangeClicked/:variable1,:variable2,:variable3"
      component={MyComponent}
 />

3.Vous pouvez alors accéder au paramètre de la nouvelle route via,

<Typography variant="h4" color="inherit">
    Exchange:{this.props.match.params.variable1}
</Typography>


<Typography variant="Body 1" color="inherit">
    Type:{this.props.match.params.variable2}
</Typography>

<Typography variant="Body 1" color="inherit">
    Durabiliy:{this.props.match.params.variable3}
</Typography>
1
Ishara Malaviarachchi