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

Lorsque vous travaillez avec des applications React multipages à l'aide de React-Router, transmettre des paramètres personnalisés les accessoires sur des pages individuelles peuvent améliorer la flexibilité de votre code. Cela permet des fonctionnalités personnalisées et le partage de données entre les composants.

Cependant, vous avez rencontré un problème où l'objet this.props.route, qui est couramment utilisé pour accéder aux accessoires transmis via les routes, renvoie un résultat indéfini. Pour résoudre ce problème, envisagez d'utiliser le prop de rendu dans votre composant Route, conformément à la documentation React-Router :

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

Dans cette approche, la fonction de prop de rendu reçoit tous les mêmes accessoires que le prop du composant, y compris les accessoires personnalisés. des accessoires comme le test. Pour accéder à l'accessoire dans votre composant Home, utilisez this.props.test.

De plus, assurez-vous de transmettre {...props} dans la fonction render prop, car cela garantit que les accessoires par défaut du routeur tels que l'emplacement , l'historique et la correspondance sont également transmis à votre composant.

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!