Question

操作系统：Windows 10 Pro
React-router：4.1.1
反应：15.5.4

所以，我正在从react-router v2迁移到v4，并且遇到了上面提到的param的问题，因为它缺失了。

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

这里有什么问题？

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

＆＃13;

  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>
    );
  }

＆＃13;

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

＆＃13;

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;

＆＃13;

更新

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

Answer 1

解决方案是重构路线如下：

＆＃13;

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

＆＃13;

TypeError：无法读取属性＆quot; postId＆＃39;未定义的（this.props.params不再可访问）

1 个答案: