重定向在下一个 js 反应中重定向之前部分显示登录页面

Question

我有一个简单的应用程序，如果用户已登录，并且如果用户手动尝试转到 /signin 页面，他将被重定向到索引页面。我正在使用 nextjs，为了实现这一点，我运行 useEffect 中的一个函数，其中布尔值被选中，如果是这样，我使用 Router.push 用于将用户重定向到索引页面。该功能运行良好，我在重定向到索引页面之前看到了几毫秒的登录页面。这是为什么？是因为组件渲染后每次都会调用useEffect吗？基本上我想运行在呈现组件之前使用该代码，并在呈现组件之后使用运行s。我基本上想要运行类似 componentWillMount 的代码。我如何在功能组件中做到这一点？或者还有其他解决方案吗？

const SigninComponent = () => {

  



useEffect(() => {
  
  isAuth() && Router.push(`/`);
}, []);

return(
   // components 
);
}

Answer 1

那是因为 useEffect 只会在组件安装后运行。
您可以使用不同的解决方案：

条件渲染，添加一个加载字段以声明默认情况下为真，当它为真时，您的组件将渲染类似 spinner/loading 的组件，如果 isAuth() return false 那么你将呈现其他东西（很可能是登录表单）。
伪代码:

const SigninComponent = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    if(isAuth()){
      Router.push(`/`);
    }else{
      setLoading(false)
    }
  }, []);

  if(!loading){
    return <Login />
  }else{
    return <MyloaderComponent />
  }
}

使用 HOC 组件，与上面类似，但你会将上述逻辑包装在 HOC 组件中
使用 getServerSideProps 和运行 isAuth() server-side 而不是 client-side，如果您在 getServerSideProps 该组件根本不会渲染。 (只能在页面中使用getServerSideProps)

export const getServerSideProps = async (ctx) => {
  const auth = await isAuth() // or other any logic, like read cookies...

  if (!auth) {
      const { res } = ctx;
      res.setHeader("location", "/");
      res.statusCode = 302;
      res.end();
      return;
  }

  return {
      props: {}, // or return user
  };
};

Answer 2

您可以考虑使用重定向组件

const SigninComponent = () => {
  if (isAuth()) return <Redirect to="/" />
  
  return(
     // components 
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

重定向在下一个 js 反应中重定向之前部分显示登录页面

Redirect shows the sign in page partially before redirecting in next js react

router

reactjs

next.js

use-effect