受保护的路由在API响应到达之前进行重定向

Question

如果订阅已结束，我正在使用“受保护的路由”将用户重定向到订阅页面。但是Route不等待api响应到达。

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const { subscriptionData = {} } = useContext(AppContext) || {};
  return (
    <Route
      render={(props) => {
        if (subscriptionData && subscriptionData.active) {
          return <Component {...props} />;
        }
        return <Redirect to={`${ROUTE_PREFIX}/settings/billing`} />;
      }}
      {...rest}
    />
  );
};

API调用正在进行中-

export const getSubscription = () => async (dispatch) => {
  const url = `/subscription/`;
  await handleAjaxCalls(dispatch, 'GET', url, null, GET_SUBSCRIPTION);
};

API调用是从useEffect()文件的App.js中进行的。 当API调用正在进行时，subscriptionData为空{}，重定向发生到${ROUTE_PREFIX}/settings/billing页。任何帮助限制这一点将不胜感激。