react-router - pass props to handler component

Question

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 (         <div>             <header>Some header</header>             <RouteHandler />         </div>     );   } });  var routes = (   <Route path="/" handler={Index}>     <Route path="comments" handler={Comments}/>     <DefaultRoute handler={Dashboard}/>   </Route> );  ReactRouter.run(routes, function (Handler) {   React.render(<Handler/>, document.body); }); 

I want to pass some properties into the Comments component.

(normally I'd do this like <Comments myprop="value" />)

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

Answer 1

If you'd rather not write wrappers, I guess you could do this:

class Index extends React.Component {     constructor(props) {     super(props);   }   render() {     return (       <h1>         Index - {this.props.route.foo}       </h1>     );   } }  var routes = (   <Route path="/" foo="bar" component={Index}/> ); 

Answer 2

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 (       <React.Fragment>         <h1>Greeting page</h1>         <p>           {text} {name}         </p>       </React.Fragment>     );   } } 

Usage:

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} /> 

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 (       <Comments myprop="myvalue"/>     );   } });  var Index = React.createClass({   render: function () {     return (       <div>         <header>Some header</header>         <RouteHandler/>       </div>     );   } });  var routes = (   <Route path="/" handler={Index}>     <Route path="comments" handler={CommentsWrapper}/>     <DefaultRoute handler={Dashboard}/>   </Route> );  ReactRouter.run(routes, function (Handler) {   React.render(<Handler/>, document.body); });