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

Question

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

Voici ce que je veux dire : Disons que nous sommes sur la page /a. Le lien conduira l'utilisateur à la page /b. Ainsi <Link to='/b'> . Maintenant, je dois faire passer un _id à travers le lien, de /a, à /b.

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

L'identifiant que j'essaie 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 fil de StackOverflow. Mon code a compilé sans se casser, ce qui signifie probablement qu'il a fonctionné ? Cependant, je ne suis pas sûr de savoir comment récupérer cette valeur passée au point de terminaison.

Toute aide sera grandement appréciée.

Answer 1

Les accessoires de passage

Vous pouvez passer des props arbitraires à une route via la fonction state objet :

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

Ensuite, vous pouvez accéder à la state à partir de votre composant :

const {foo} = props.location.state

console.log(foo) // "bar"

Passage de paramètres

Configurez votre chemin d'accès pour qu'il accepte les paramètres nommés ( :id ) :

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

Vous pouvez ensuite passer des paramètres d'URL tels que des ID dans votre lien. to :

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

Vous pouvez accéder au paramètre à l'intérieur de votre composant via la fonction match objet :

const {id} = props.match.params

console.log(id) // "foo"

Sources

• https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/location.md

• https://github.com/ReactTraining/react-router/issues/4036

Answer 2

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

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

et dans l'itinéraire, vous devez mettre en place quelque chose comme ceci

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

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

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

Answer 3

Si vous utilisez les react hooks, vous pouvez récupérer les paramètres passés depuis l'objet d'état en utilisant useLocation

1. Lien vers l'autre page

<Link to={{ pathname: `page/${id}`, state: { foo: 'bar'} }}>Click me</Link>

2. Déclarer une route

   <Route exact path={page/:id} component={BComponent} />

3. Obtenez les paramètres d'emplacement, puis l'état d'utilisation contenant votre objet paire clé-valeur.

   const BComponent = (props) => { const location = useLocation(); console.log(location.state.foo);

   return () }

Answer 4

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

1. élément de liaison

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

Configurez votre chemin d'accès pour accepter ces paramètres.

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

3.vous pouvez alors accéder aux paramètres 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>