使用 HOC 反应路由器渲染方法答案

【问题标题】：React router render method with HOC使用 HOC 反应路由器渲染方法
【发布时间】：2019-09-20 07:11:45
【问题描述】：

我正在尝试在 react-router-dom (5.0.1) 中实现这个逻辑。这是我的路线：

    <Route
      path="/available-days"
      render={props => isAdmin ? Auth(UserProfileView) : <Redirect to='/dashboard'/>}
      />

当idAdmin是true时，会导致错误：Objects are not valid as a React child。我也试过这个：

    <Route
      path="/available-days"
      render={props => isAdmin ? Auth(UserProfileView)({ ...props }) : <Redirect to='/dashboard'/>}
    />

然后我看到TypeError: Object(...)(...) is not a function。为什么我不能在渲染方法中使用 HOC，我怎样才能让它工作？顺便说一句，Auth(UserProfileView) 在组件方法中工作正常。

【问题讨论】：

【解决方案1】：

不要在渲染方法中使用 HOC，请参阅此处https://reactjs.org/docs/higher-order-components.html。

你可以试试

const UserProfileViewWithAuth = Auth(UserProfileView)

<Route
   path="/available-days"
   render={props => isAdmin ? <UserProfileViewWithAuth {...props} /> : <Redirect to='/dashboard'/>}
/>

【讨论】：