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