React组件间路由传参失败：this.props.location未定义求助

嘿，刚学React3天就敢折腾路由传参，已经超棒啦！咱们来快速搞定这个问题～

问题根源 #

你在配置/bookCourse/:date这条路由时，用了render属性但没有把路由相关的props传递给Form组件。直接写() => <Form/>的话，Form组件根本拿不到location、match这些路由提供的属性，自然会报错TypeError: this.props.location is undefined。

解决方案 #

1. 修改路由配置，传递路由props #

把你的Route代码改成这样：

<Route path='/bookCourse/:date' exact render={(props) => <Form {...props} />} />

这里的props包含了路由的location、match等信息，通过{...props}解构传递给Form组件，Form就能拿到这些属性了。

2. 在Form组件中正确获取日期参数 #

其实获取路由参数更推荐用match.params（专门用于路由参数的属性），比location.params更直接。修改Form组件里的代码：

// 替换原来的 {this.props.location.params.date}
{this.props.match.params.date}

验证一下 #

你的Kurse组件里的Link写法是对的：

<Link to={{pathname: "/bookCourse/"+date}}><Button>{date}</Button></Link>

点击按钮后，路由会正确带上日期参数，现在修改完路由和Form组件后，就能在Form里正常显示日期啦！

内容的提问来源于stack exchange，提问作者user2656732