我正在尝试使用react-router-dom和对每个路由更改的用户进行身份验证react hooks。这个想法是,每次用户导航到一条路线时,系统都会进行 api 调用并对用户进行身份验证。我需要实现这一点,因为我使用react-redux, 并且在每个窗口重新加载 redux 状态不会持久化。所以我需要再次设置isLoggedNowpropstrue:
const PrivateRoute = ({
  component: Component,
  checkOnEachRoute: checkReq,
  isUserLogged,
  ...rest
}) => {
  const [isLoggedNow, setLogged] = useState(isUserLogged);
  useEffect(
    () => {
      const fetchStatus = async () => {
        try {
          await selectisUserLogged();
          setLogged(true);
        } catch (error) {
          console.log(error);
        }
      };
      fetchStatus();
    },
    [isUserLogged],
  );
  return (
    <Route
      {...rest}
      render={props =>
        isLoggedNow ? (
          <div>
            <Component {...props} />
          </div>
        ) : (
          <Redirect
            to={{
              pathname: '/login',
            }}
          />
        )
      }
    />
  );
};
然后我会PrivateRoute像这样使用上面的:
function App(props) {
  return (
    <div>
      <Switch location={props.location}>
        <Route exact path="/login" component={Login} />
        <PrivateRoute exact path="/sidebar" component={Sidebar} />
      </Switch>
    </div>
  );
}
首先是isUserLoggedis true,但是在窗口重新加载后我收到一个错误Warning: Can't perform a React state update on an unmounted component. 
那么我该如何实现这一点,所以在每个窗口重新加载时我都会对用户进行身份验证?我正在寻找某种componentWillMount.