如果已验证 NextJS Redux，则重定向

Question

我正在使用 Redux 学习 NextJS，我创建了一个商店并设法让用户在通过身份验证时进入 Eedux 状态，但现在我不希望该用户在通过身份验证后访问登录页面。

这是我到目前为止编写的代码：

const SignInSignUp = ({ currentUser }) => {
  const StyledSignInSignUp = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
  `;

  const renderSignIn = () => {
    if (currentUser) {
      Router.push('/');
    } else {
      return (
        <StyledSignInSignUp>
          <SignIn />
          <SignUp />
        </StyledSignInSignUp>
      );
    }
  };

  return (
    <motion.div
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      exit={{ y: 50 }}
      className="container"
    >
      {renderSignIn()}
    </motion.div>
  );
};

const mapStateToProps = ({ user }) => ({ currentUser: user.currentUser });

export default connect(mapStateToProps)(SignInSignUp);

它可以正常工作并重定向用户，但是大约需要 3 秒的时间，状态才会出现，然后再进行重定向。

有没有一种方法可以在我已经拥有状态之前不呈现页面或采取其他措施来防止出现这种情况？

Answer 1

你可以在你的 return 语句中有一个条件语句，当你加载有关用户是否登录的信息时，你只渲染一个片段：

const SignInSignUp = ({ currentUser, isUserLoading }) => {
  const StyledSignInSignUp = styled.div`
    display: flex;
    align-items: center;
    justify-content: space-between;
  `;

  const renderSignIn = () => {
    if (currentUser) {
      Router.push('/');
    } else {
      return (
        <StyledSignInSignUp>
          <SignIn />
          <SignUp />
        </StyledSignInSignUp>
      );
    }
  };

  return (
    <motion.div
      initial={{ y: 50 }}
      animate={{ y: 0 }}
      exit={{ y: 50 }}
      className="container"
    >
      {!isUserLoading ? renderSignIn() : <></>}
    </motion.div>
  );
};

const mapStateToProps = ({ user }) => ({ currentUser: user.currentUser, isUserLoading: user.isUserLoading (UPDATE THIS) });

export default connect(mapStateToProps)(SignInSignUp);

其中 isUserLoading 是一种状态，当您完成加载时该状态变为 false。

如果已验证 NextJS Redux，则重定向

Redirect if authenticated NextJS Redux

reactjs

redux

next.js