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

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

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

  1. 阻止浏览器回退
useEffect(() => {
    window.history.pushState(null, null, document.URL);
    window.onpopstate = function (e: PopStateEvent) {
        window.history.pushState(null, null, document.URL);
    };
    return () => {
      // 回退事件只用于当前组件，则需要在组件销毁时把回退事件销毁
      window.onpopstate = null;
    };
  }, []);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容