reactjs - 无法读取未定义的属性 ‘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={} 时传递 props 似乎工作正常，但在渲染函数中却不行。为什么？

Answer 1

因为使用render，您不会将路由器传递的默认 Prop 传递到组件中，例如匹配、历史记录等。

当你写下这个:

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

这意味着 PageStart 组件中没有 props 值。

这样写:

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

现在 {...props} 会将所有值传递到 PageStart 组件中。