TypeError：无法读取 Reactjs 上未定义的属性“参数”答案

【问题标题】：TypeError: Cannot read property 'params' of undefined on ReactjsTypeError：无法读取 Reactjs 上未定义的属性“参数”
【发布时间】：2020-06-25 17:28:48
【问题描述】：

我在 app.js 上有一条路线

<Route exact path = "/:name" component = {CityPage} />

我在 CityPage 中有一个组件我有一个组件

render(){
    return(
            <CityHome />
    )
}

在那个组件中我有

<p> {this.props.match.params.name} </p>

但是当我运行程序时它显示错误

为什么？

【问题讨论】：

如果您需要帮助，您需要提供更多代码。这只是意味着this.props.match 是undefined...
整个 Cityhome 类代码会有所帮助，应该有一个属性匹配，有一个值
您似乎没有将任何道具传递给CityHome。这可以解释为什么它是undefined（假设这是您正在访问的组件）。它可能像<CityHome match={this.props.match} /> 一样简单，但提供的代码有限，我不能确定。
@BrianThompson 但是如果我创建另一个组件并且我也想要那个道具

标签： reactjs react-router

【解决方案1】：

默认情况下，React Router 不会将任何道具传递给组件。如果您需要访问该数据，则应在定义 Route 时使用 render 属性而不是 component：

<Route exact path="/:name" render={routeProps => (
  <CityPage match={routeProps.match} />
)} />

正如您在此处看到的，render 是一个接收route props 并返回视图的方法。您可以使用该函数将这些值中的任何一个传递给您添加到返回视图的组件。

【讨论】：