Question

为了在我的App中处理身份验证/条件路由，我决定引入一个HOC组件，该组件基于switch语句检查是否应呈现该组件。

当然，可以通过在组件本身中定义条件来获得相同的结果，但是现在它允许我有一个文件来处理此问题。

但是，使用useHistory()钩似乎会返回history为未定义。可能是因为我的应用程序Routes不是以常规方式编写的（AllowAccess是此处的HOC组件）：

<Router>
  <Switch>
    <Route exact path='/success' component={AllowAccess(SuccessComponent)}></Route>
    <Route render={() => <Redirect to="/" />} />
  </Switch>
</Router>

有没有办法让我可以从useHistory钩中获取历史道具，并在HOC中将它们用作“常规”组件？

Answer 1

据我所见，我并没有真正找到为什么它对您没有帮助，但是我在这里使用PrivateRoute文件来处理对路由的访问。但是为什么要从HOC访问useHistory

  const PrivateRoute = ({ component: Component,isAuthenticated, ...rest }) => {
  return (
    <Route {...rest} render={props =>
      !isAuthenticated ? (
        <Redirect to='/'/>
      ) : (
        <Component {...props} />
      )
    }
    />
  );
};

实现

`<PrivateRoute exa`ct path="/add" component={AddEmployee} isAuthenticated={isAdmin}/>

无法从HOC组件中的useHistory（）读取历史记录

1 个答案: