通过react-router中的props传递功能

IT技术 javascript reactjs function react-router-v4 react-props
2021-04-25 22:01:31

例如,我知道如何在 react 路由器中传递 props 之类的string类型。但是当我尝试传递函数的props时遇到了问题。在我的孩子组件上,这个props是"undefined".

我的链接示例:

<Link to={'/Content/' + this.props.index + '/' + this.props.decreaseIndexProject}>Page n°1</Link>

索引props是一个数字,所以我可以在我的孩子组件上得到它,但不是decreaseIndexProjectprops。

我使用 PropType :

NavBar.propTypes = {
   indexProject: PropTypes.number,
   decreaseIndexProject: PropTypes.func
};

我的路由器组件:

<Router>
  <Switch>
    <Route path="/Content/:index/:decrease" exact name="content" component={Content} />
  </Switch>
</Router>

Maby 还有其他方法可以传递函数吗?谢谢您的帮助。

2个回答

您可以使用 Link 将函数作为位置状态传递

<Link to={{
   pathname: '/Content/' + this.props.index
   state: {decrease: this.props.decreaseIndexProject}
}}>Page n°1</Link>

<Router>
  <Switch>
    <Route path="/Content/:index" exact name="content" component={Content} />
  </Switch>
</Router>

现在in Content你可以像这样使用它this.props.location.state.decrease

@Shubham Khatri 的回答是正确的,但也不要忘记将位置传递给您的组件,否则您的 location.state 将是未定义的。

<Route
      path="/Content/:index"
      render={props => (<ComponentName location={props.location} {...props}/>)}
 />