将Parent的props传递给子组件时无法获取params

Question

I am trying to build a simple app which just lists blogs using App Component as IndexRoute

 <Router history={browserHistory}> <Route path="/" component={Root}> <IndexRoute component={() => <App loader={this.props.fetching} posts={this.props.posts} fetching={this.props.fetching} fetched={this.props.fetched} />}> </IndexRoute> <Route path="form" component={Form}></Route> <Route path="about" component={About}></Route> <Route path="post/:id" component={SinglePost}></Route> </Route> </Router> 

I am trying to display, the single blog post using SinglePost Component when the title is clicked.

 import React from 'react'; class SinglePost extends React.Component { render(){ console.log("Single Post Props", this.props); return( <div> Passed: {this.props.params.id} </div> ); } } export default SinglePost; 

So, I am getting its id . and I can access it. Using this in App Component:

<Route path="post/:id" component={SinglePost}></Route>

But, i want to pass the posts props in the parent

const mapStateToProps = (state) => {
return {
    fetching: state.fetching,
    fetched: state.fetched,
    posts: state.posts,
    error: state.error
};  };

SO i changed the component={} in the Router from:

<Route path="post/:id" component={SinglePost}></Route>

into this(as I searched that this is the way to pass props in react-router [ react-router - pass props to handler component ):

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts}/>} />

Now, i am getting this error because it is not getting the params prop.

How can I access the params prop again so I can sort the array of posts by via passed params :id ?

Answer 1

You are using Arrow Functions. Arrow Functions do not bind this value automatically, So you need to do bind this manually.

The code Snippet doesn't works, And it won't because you simply pasted JSX code in plain HTML.

But, Replacing

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts}/>} />

with

<Route path="post/:id" component={() => <SinglePost posts={this.props.posts.bind(this)}/>} />

should work, or you can use function() {} to bind this for you.

Edit:

Preferred way of passing props in react-router

var props = {
    prop1: "PropContent"
}

<SinglePost {...props} /> 

And this can be accessed in Single post component,

{this.props.route.prop1}  // PropContent