How to Pass Props to Handler Component in React Router?

Passing Props to Handler Component in React Router

In React.js applications that utilize React Router, there may be instances where passing specific properties to child components is necessary. For example, consider the following structure:

<code class="javascript">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);
});</code>

The goal is to pass properties into the Comments component. Normally, this could be achieved directly in the component declaration. However, with React Router, an alternative approach is required.

One option is to utilize a wrapper component. This would involve creating a separate component that wraps the Comments component and passes the desired props. Here's an example:

<code class="javascript">var CommentsWithProps = React.createClass({
  render: function () {
    return (
      <Comments myprop={this.props.myprop} />
    );
  }
});

// Then in the routes definition:

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWithProps}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

Another approach, without using wrapper components, is to modify the Index component:

<code class="javascript">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}/>
);</code>

The above is the detailed content of How to Pass Props to Handler Component in React Router?. For more information, please follow other related articles on the PHP Chinese website!