js 浏览器回退事件 如何在react使用

1. 监听浏览器回退事件
   在hooks组件使用

useEffect(() => {
    window.onpopstate = function (e: PopStateEvent) {
        // 业务逻辑
    };
    return () => {
      // 回退事件只用于当前组件，则需要在组件销毁时把回退事件销毁
      window.onpopstate = null;
    };
  }, []);

这个事件仅限于监听浏览器回退事件做一些业务逻辑处理，并不能阻止浏览器回退

2. 阻止浏览器回退

useEffect(() => {
    window.history.pushState(null, null, document.URL);
    window.onpopstate = function (e: PopStateEvent) {
        window.history.pushState(null, null, document.URL);
    };
    return () => {
      // 回退事件只用于当前组件，则需要在组件销毁时把回退事件销毁
      window.onpopstate = null;
    };
  }, []);