Question

无法读取未定义的属性‘params’（React Router 4）

2017-09-13

57996

reactjs react-router

我设置了一条路由来渲染一个组件：

<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 时，您不会将路由器传递的默认 props 传递到组件中，例如 match、history 等。

当您写下以下内容时：

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

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

像这样写：

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

Answer 3

就我而言，我发现路由器属性中不再是 match ，而是 computedMatch 。

例如： this.props.computedMatch.params.id

希望这对某人有帮助！