Question

我具有用于在名为Challenges的组件上进行路由的设置，如下所示：

render() {
  return (
    <Route
      exact
      path={`${this.props.match.path}/:id`}
      render={() => (
        <P5Wrapper
          p5Props={{ controls: this.state.controls }}
          onSetAppState={this.onSetAppState}
        />
      )}
    />
  )
}

export default withRouter(connect(
  mapStateToProps,
  mapDispatchToProps
)(Challenges));

它由NavLink在另一个名为Menu.js的组件中进行访问：

<NavLink to={`/${this.props.path}${item.link}`} key={item.text}>
  <ListItem button>
    <ListItemText primary={item.text} />
  </ListItem>
</NavLink>

将this.props.path设置为挑战，并且item.link为 / 1 （可以是其他任何数字）。

问题是，当页面加载到 / challenges 菜单时，其他所有内容均正常运行，但是当我单击NavLink时，URL更改为 / challenges / 1 P5Wrapper组件未安装在页面上。

但是，如果我直接从浏览器访问 / challenges / 1 ，那么它将确实安装了该组件，并且其他item.link的NavLinks也可以正常工作[即/ challenges / 5]。

这是一个示例，说明路由没有将参数发送到组件Example，我做错了吗？

Answer 1

在底部交换HOC的顺序。

所以，应该是：

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withRouter(Challenges));

React Router-路线不会在导航上加载，但会在直接链接上加载

1 个答案: