在反应路由器中通过道具传递功能

Question

我知道如何在反应路由器中传递道具，例如 string 类型。但是当我尝试传递功能道具时遇到问题。在我的 children 组件上，这个道具是 "undefined".

我的例子 Link :

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

索引道具是一个数字，所以我可以在我的 children 组件上得到它，但不能在 decreaseIndexProject 道具上得到它。

我使用 PropType :

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

我的路由器组件：

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

也许还有其他方法可以传递函数？谢谢你的帮助。

Answer 1

您可以使用 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

一样使用它

Answer 2

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

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

Pass function by props in react router