无法读取未定义的属性“参数”（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={} 时传递道具似乎可以正常工作，但不能在渲染函数中。为什么？

原文由 Matt Saunders 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因为使用 render 你没有将路由器传递的默认道具传递给组件，如匹配、历史记录等。

当你写这个：

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

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

像这样写：

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

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

原文由 Mayank Shukla 发布，翻译遵循 CC BY-SA 4.0 许可协议

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} />
    )}
/>

原文由 ChrisR 发布，翻译遵循 CC BY-SA 4.0 许可协议