web移动端拦截页面后退操作

向路由栈添加两条标记，监听如果回退到上一个标记，就执行router.go(1)，回到当前页面

//只有push才会往历史记录push空记录
import { useEffect } from "react";
import { useHistory } from "react-router";
import { History } from "history";

interface Record {
  pathname: string;
  length: number;
}

function usePopstateListener(
  callback: (history: History, e: any) => void
): void {
  const history = useHistory();

  useEffect(() => {
    const backLJ = (e: any) => {
      if (e.state && e.state.target === "MeanSure") {
        /**
         * 1.点击返回键原生也会go(-1)一次，
         * 如果我们点击返回前是Final的话，那么此时的记录必然是MeanSure
         * 否则，这就是一次误拦截，不需要做特殊处理
         * 2.push后length会正常,但go和goBack length不会变
         * 3.我们的拦截页记录的length为查了空白页之后的length
         */
        callback && callback(history, e);
      }
    };

    window.addEventListener("popstate", backLJ, false);
    if (history.action === "PUSH") {
      window.history.pushState(
        { target: "MeanSure", random: Math.random() },
        ""
      );
      window.history.pushState({ target: "Final", random: Math.random() }, "");
    }

    return () => {
      window.removeEventListener("popstate", backLJ, false);
    };
  }, [history, callback]);
}

export { usePopstateListener };