友好的倒计时跳转页面

我称之为简单实用的东西！(demo hhh

技术点在于：antd message的content 可以渲染节点，那么加个倒计时组件即可达成效果。

jcode 完整代码在末尾

原本是在做next框架的内容的：

想通过是否登录的状态，来判断该页面是否能够被访问，不被访问的跳转到首页。

然后就想写个hook（也许是hook吧），利用LoginContext即可拿到登录状态，已经登录则弹窗提醒，并且倒计时跳转。

      message.info({
        className: "multiline-message",
        content: (
          <>
            您已经登录，请先退出登录。<br></br>
            自动为您跳转到首页，倒计时
            <MyCountdown />秒
          </>
        ),
        duration: 0
      });

duration: 0 设置不自动销毁。通过定时器销毁。

      setTimeout(() => {
        message.destroy();
        // 做跳转
        // push("/");
      }, 3000);

// import 就不用给啦

const MyCountdown = () => {
  const [count, setCount] = useState(3);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount - 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return <>{count}</>;
};

const useLogin = () => {
  // 原本用context的
  // const { isLogined, setIsLogined } = useContext(LoginContext);
  const [isLogined, setIsLogined]=useState(true)
  useEffect(() => {
    if (isLogined) {
      message.info({
        className: "multiline-message",
        content: (
          <>
            您已经登录，请先退出登录。<br></br>
            自动为您跳转到首页，倒计时
            <MyCountdown />秒
          </>
        ),
        duration: 0
      });
      setTimeout(() => {
        message.destroy();
        // 做跳转
        // push("/");
      }, 3000);
    }
  });
};


const Test = function () {
  useLogin()
  return <div></div>;
};
const app = document.getElementById('app');
const root = createRoot(app!)
root.render(<Test />);