TypeError：无法读取未定义的属性“ postId”（无法再访问this.props.params）

Question

操作系统：Windows 10 Pro
反应路由器：4.1.1
反应：15.5.4

因此，我正在从react-router v2迁移到v4，并且遇到上述参数的问题，因为缺少该参数。

当view/:postId (/view/0)的路由匹配时发生错误，但是呈现的组件未检测到this.props.params.postId存在。

这是什么问题？

我的路由组件（Main.js）如下：

  render () { return ( <div> <h1> <Link to="/">Flamingo City</Link> </h1> <Switch> <Route path={`${this.props.match.url}`} exact render={() => ( <PhotoGrid {...this.props.children} {...this.props} /> )} /> <Route path={`${this.props.match.url}view/:postId`} render={() => ( <Single {...this.props.children} {...this.props} /> )} /> <Route path={`${this.props.match.url}login`} component={LoginUser} /> </Switch> </div> ); } 

我的渲染组件（Single.js）如下：

 class Single extends React.Component { constructor(props) { super(props); } render() { const postId = this.props.params.postId; const { data, i, key } = this.props; if (data.loading) { return <p>Loading ...</p>; } if (data.error) { return <p>{data.error.message}</p>; } return ( <div className="single-photo"> <Photo key={key} postIndexID={postId} post={data.allPostses[postId]} postId={data.allPostses[postId].id} {...this.props} /> <Comments key={key} post={data.allPostses[postId]} postId={data.allPostses[postId].id} postIndexID={postId} {...this.props} /> </div> ); } } export default Single; 

更新：

看来现在可以通过执行this.props.match.params来访问params，但是在devTools中检查该对象为空。 这是什么问题？

Answer 1

解决方案是按以下方式重构路由：

  <Route path={`${this.props.match.url}view/:postId`} render={(props) => ( <Single {...this.props} {...props} /> )} />