Pasar accesorios a los componentes del controlador usando React Router

En las aplicaciones React.js que aprovechan React Router, puede encontrar escenarios en los que necesite pasar accesorios a componentes del controlador específicos . Considere la siguiente estructura de aplicación:

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 pasar accesorios al componente Comentarios, normalmente se utiliza una sintaxis como . Sin embargo, este enfoque es incompatible con React Router, que espera que los componentes del controlador sean funciones puras o componentes de clase.

Una solución es crear un componente contenedor que encapsule tanto el componente del controlador como los accesorios pasados:

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

var routes = (
  
    
    
  
);

Como alternativa, puede aprovechar los componentes de clase y el objeto this.props.route para acceder a los accesorios pasados ​​a la ruta principal:

class Index extends React.Component { 

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

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

var routes = (
  
);

Al configurar el accesorio foo en la ruta /, puede acceder al accesorio más adelante dentro del componente Índice usando this.props.route.