TypeError：无法读取Reactjs上未定义的属性'params'

Question

我在app.js上有一条路线

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

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

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

在那个组件中，我有

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

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

为什么？

Answer 1

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

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

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