Transmission d'accessoires aux composants du gestionnaire à l'aide de React Router

Dans les applications React.js qui exploitent React Router, vous pouvez rencontrer des scénarios dans lesquels vous devez transmettre des accessoires à des composants de gestionnaire spécifiques . Considérez la structure d'application suivante :

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        

            
Some header

    );
  }
});

var routes = (
  
);

ReactRouter.run(routes, function (Handler) {
  React.render(, document.body);
});

Pour transmettre des accessoires au composant Commentaires, vous utilisez généralement une syntaxe telle que . Cependant, cette approche est incompatible avec React Router, qui s'attend à ce que les composants du gestionnaire soient de pures fonctions ou des composants de classe.

Une solution consiste à créer un composant wrapper qui encapsule à la fois le composant du gestionnaire et les accessoires transmis :

// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return ;
  }
});

var routes = (
  
);

Vous pouvez également exploiter les composants de classe et l'objet this.props.route pour accéder aux accessoires transmis à la route parent :

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      

        Index - {this.props.route.foo}
      
    );
  }
}

var routes = (
  
);

En définissant la prop foo sur la route /, vous pouvez accéder à la prop ultérieurement dans le composant Index en utilisant this.props.route.