Comment puis-je transmettre des accessoires dans des liens à l'aide de React Router ?

Passer les accessoires dans le lien dans React-Router

Lors de l'utilisation de l'option composant dans React-Router, il est possible de transmettre des propriétés à la nouvelle vue. Pour ce faire, utilisez la propriété to de et transmettez un objet avec les propriétés souhaitées. Par exemple :

<code class="js"><Link to={{ pathname: '/ideas', query: { testvalue: 'hello' } }}>Create Idea</Link></code>

Dans la vue de destination, accédez aux propriétés transmises en utilisant le modèle suivant :

<code class="js">render() {
    console.log(this.props.match.params.testvalue, this.props.location.query.backurl)
    return <span>{testvalue} {backurl}</span>    
}</code>

remarque : la syntaxe ci-dessus est désormais obsolète

Dans les composants fonctionnels mis à jour à l'aide de hooks :

<code class="js">const CreatedIdeaView = () => {
    const { testvalue } = useParams();
    const { query, search } = useLocation(); 
    console.log(testvalue, query.backUrl, new URLSearchParams(search).get('backUrl'))
    return <span>{testvalue} {backurl}</span>    
}</code>

Autres considérations

• Assurez-vous que l'itinéraire de destination a un chemin correspondant défini pour recevoir la propriété transmise. Dans cet exemple, la route doit être définie comme suit :

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

• Le composant Link utilisé dans React-Router a été mis à jour dans les versions récentes. La syntaxe de transmission des propriétés peut différer selon la version utilisée.

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!