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课程中，你将能够访问路由器道具。