受保护的路由在 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

页面。任何限制这一点的帮助将不胜感激。

Answer 1

“如果返回这个，否则返回那个” 试试这个逻辑