Passando props para componentes do manipulador usando React Router

Em aplicativos React.js que utilizam o React Router, você pode encontrar cenários em que precisa passar props para componentes manipuladores específicos . Considere a seguinte estrutura do aplicativo:

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);
});

Para passar props para o componente Comments, você normalmente usa sintaxe como . No entanto, esta abordagem é incompatível com o React Router, que espera que os componentes do manipulador sejam funções puras ou componentes de classe.

Uma solução é criar um componente wrapper que encapsula tanto o componente do manipulador quanto os adereços passados:

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

var routes = (
  
    
    
  
);

Como alternativa, você pode aproveitar os componentes da classe e o objeto this.props.route para acessar adereços passados ​​para a rota pai:

class Index extends React.Component { 

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

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

var routes = (
  
);

Ao definir a propriedade foo na rota /, você pode acessá-la posteriormente no componente Index usando this.props.route.