无法读取未定义的属性'params'(React Router 4)

Question

我有一个路由设置来渲染组件:

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

然后在那个组件(PageStart)中我有:

this.props.match.params.id

但它抛出一个错误:

Cannot read property 'params' of undefined

简单调用时传递道具component={}似乎工作正常但不在渲染功能中.为什么？

Answer 1

因为render你没有将路由器传递的默认道具传递给组件,比如匹配,历史等.

当你写这个:

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

它意味着组件中没有props价值PageStart.

写这样:

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

现在{...props}将所有值传递给PageStart组件.

Answer 2

因为您没有将任何match属性传递给 PageStart。你给它一个key但没有match。尝试这个：

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