React Router v4 HOC with render props

Question

我想传递一个道具并在我的路线中宣布一个HOC进行身份验证

目前，我使用

<Route exact path="/add" component={requireAuth(Add)} />

它正在工作，但没有道具。

我相信传递道具需要使用像这样的渲染语法

<Route exact path="/add" render={props => <Add {...props} type="MyProp" />}/>

但有没有办法在这里通过HOC？

谢谢！

Answer 1

是的，你可以。将大写变量分配给requireAuth(Add)。

const AuthAdd = requireAuth(Add);
<Route
  exact
  path="/add"
  render={props => <AuthAdd {...props} type="MyProp" />}
/>;

Answer 2

使用withRouter。

<Route exact path="/add" component={withRouter(Add)} />

在Add课程中，您将可以访问路由器道具。