Cannot read property 'params' of undefined (React Router 4)


(Matt Saunders) #1

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?

SOLVED: props were not being passed through correctly: https://stackoverflow.com/a/46197259/874691


(Ihtml5) #2

hi @mattsaunders In react-router v4, you must display the match to the component, the component can receive the match in the params attribute, for example:

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

(Zhangs) #3

I wonder if key={this.props.location.key} can become key={location.key} since location is passed in:
<Route exact path="/page/:id" location={this.props.location} key={this.props.location.key} render={({ location, match
}) => (

)} />