react-router - pass props to handler component
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}/>
);
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);
});
Copying from the comments by ciantic in the accepted response:
<Route path="comments" component={() => (<Comments myProp="value" />)}/>
This is the most graceful solution in my opinion. It works. Helped me.
This is the solution from Rajesh, without the inconvenient commented by yuji, and updated for React Router 4.
The code would be like this:
<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>
Note that I use render
instead of component
. The reason is to avoid undesired remounting. I also pass the props
to that method, and I use the same props on the Comments component with the object spread operator (ES7 proposal).