Cannot read property ‘params’ of undefined (React Router 4)

Question

I have a route set up to render a component:

<Route exact path="/page/:id" location={this.props.location} key={this.props.location.key} render={({ location }) => (     <PageStart key={this.props.location.key} /> )} /> 

Then inside that component (PageStart) I have:

this.props.match.params.id 

But it throws an error:

Cannot read property 'params' of undefined 

Passing props when simply calling component={} seems to work fine but not in a render function. Why?

Answer 1

Because with render you are not passing the default props passed by the router into component, like match, history etc.

When you write this:

<PageStart key={this.props.location.key} /> 

It means no props value in PageStart component.

Write it like this:

render = {props => <PageStart {...props} key={this.props.location.key} /> } /> 

Now {...props} will pass all the value into PageStart component.