javascript - react-router - pass props to handler component

I have the following structure for my React.js application using React Router:

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

I want to pass some properties into the Comments component.

(normally I'd do this like )

What's the easiest and right way to do so with React Router?

Answer

UPDATE

Since new release, it's possible to pass props directly via the Route component, without using a Wrapper. For example, by using render prop.

Component:

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;


    const {name} = params;

    return (
      
        
Greeting page
        

          {text} {name}
        
      
    );

  }
}

Usage:

 } />

Codesandbox Example

---

OLD VERSION

My preferred way is wrap the Comments component and pass the wrapper as a route handler.

This is your example with changes applied:

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

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

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


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

        
Some header
        
      
    );
  }
});


var routes = (
  
    
    
  
);

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

});