Comment transmettre des accessoires aux composants cibles dans le lien de React Router ?

Pass Props in Link React-Router

Le composant Link de React-Router permet de transmettre des propriétés aux composants cibles. Cependant, il est crucial de garantir une configuration appropriée de l'itinéraire pour faciliter le transfert de données.

Le problème survient lorsque le chemin de l'itinéraire ne correspond pas à la récupération de propriété prévue. Dans le code fourni, le champ <Route> pour le composant cible n'a pas de chemin correspondant :

<Route name="ideas" handler={CreateIdeaView} />

Pour résoudre le problème et transmettre les propriétés via le lien, spécifiez le chemin dans la configuration de l'itinéraire, en vous assurant qu'il correspond aux paramètres du <Lien> composant :

<Route name="ideas" path="/:testvalue" handler={CreateIdeaView} />

Le paramètre d'espace réservé :testvalue correspond à la propriété passée dans le <Link>:

<Link to="ideas" params={{ testvalue: "hello" }} />

Les propriétés sont désormais accessibles dans la méthode de rendu du composant cible :

render: function() {
  console.log(this.props.match.params.testvalue); // logs "hello"
}

En utilisant des hooks dans les composants fonctionnels, vous pouvez accéder à des accessoires comme celui-ci :

const CreatedIdeaView = () => {
  const { testvalue } = useParams();
  console.log(testvalue); // logs "hello"
}

Alternativement, si vous devez transmettre des paramètres de requête au lieu de paramètres de chemin, vous pouvez l'utiliser comme ceci :

<Link to={{pathname: '/ideas', query: {testvalue: "hello"}}} />

Dans le composant cible :

componentDidMount() {
    console.log(this.props.location.query.testvalue) // logs "hello"
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!