Comment transmettre des accessoires personnalisés aux composants du routeur dans React Router v4 ?

Passer des accessoires personnalisés aux composants du routeur dans React Router v4

Lors de la création d'applications React avec React Router, il est souvent nécessaire de transmettre des accessoires personnalisés aux composants enfants dans l’arborescence de routage. Dans React Router v4, l'accès aux accessoires transmis via le routeur peut poser des problèmes, car this.props.route peut ne pas toujours être disponible.

Pour résoudre ce problème, une approche consiste à utiliser l'accessoire de rendu pour le composant Route. . Cela permet l'intégration des définitions de composants et un rendu pratique sans avoir besoin de fichiers de composants séparés.

Selon la documentation de React Router, le prop de rendu pour Route reçoit les mêmes accessoires de route que le prop de rendu du composant. Par conséquent, il est possible de passer des props personnalisés en modifiant la définition de Route comme suit :

<Route path="/" exact render={(props) => (<Home test="hi" {...props}/>)} />

Au sein du composant enfant (Home), le prop personnalisé est accessible via this.props.test :

this.props.test 

Il est important de noter que l'opérateur de propagation {...props} doit être utilisé dans la définition de la route pour garantir que les accessoires de routeur par défaut (tels que l'emplacement, l'historique et la correspondance) sont également transmis à l'enfant. composant.

En tirant parti de l'accessoire de rendu, les développeurs peuvent facilement transmettre des accessoires personnalisés aux composants du routeur enfants dans React Router v4, améliorant ainsi la flexibilité et la maintenabilité de leur architecture de routage.

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!