反应| 如何检测页面刷新(F5)

Question

我正在使用React js.我需要检测page refresh.当用户点击刷新图标或按F5时,我需要找出该事件.

我尝试使用javascript函数进行stackoverflow发布

我用javascript函数beforeunload仍然没有运气.

onUnload(event) { 
  alert('page Refreshed')
}

componentDidMount() {
  window.addEventListener("beforeunload", this.onUnload)
}

componentWillUnmount() {
   window.removeEventListener("beforeunload", this.onUnload)
}

在这里我有关于stackblitz的完整代码

Answer 1

您的代码似乎工作得很好，您的警报将不起作用，因为您没有停止刷新。如果您console.log('hello')显示输出。

更新 - -

这应该会阻止用户刷新，但这取决于您想要发生的情况。

componentDidMount() {
    window.onbeforeunload = function() {
        this.onUnload();
        return "";
    }.bind(this);
}

Answer 2

将它放在构造函数中:

if (window.performance) {
  if (performance.navigation.type == 1) {
    alert( "This page is reloaded" );
  } else {
    alert( "This page is not reloaded");
  }
}

它会工作,请在stackblitz上看到这个例子.

Answer 3

如果您正在使用 React Hook、UseEffect，您可以将以下更改放入您的组件中。它对我有用

useEffect(() => {
    window.addEventListener("beforeunload", alertUser);
    return () => {
      window.removeEventListener("beforeunload", alertUser);
    };
  }, []);
  const alertUser = (e) => {
    e.preventDefault();
    e.returnValue = "";
  };

Answer 4

不幸的是，由于 performance.navigation.type 已被弃用，目前接受的答案不能被视为可以接受

最新的 API 是实验性 ATM。作为一种解决方法，我只能建议在 redux（或您使用的任何东西）存储中保存一些值以指示重新加载后的状态，并在第一次路由更改时更新它以指示路由不是因为刷新而更改。

Answer 5

如果您使用 REDUX 或 CONTEXT API 那么这很容易。您可以检查 REDUX 或 CONTEXT 状态变量。当用户刷新页面时，它会重置 CONTEXT 或 REDUX 状态，您必须再次手动设置它们。因此，如果它们未设置或等于您给出的初始值，那么您可以假设页面已刷新。

Answer 6

它实际上非常简单，每当您重新加载页面时，这都会添加默认警报。

功能组件

useEffect(() => {
    window.onbeforeunload = function() {
        return true;
    };

    return () => {
        window.onbeforeunload = null;
    };
}, []);

类组件

componentDidMount(){
    window.onbeforeunload = function() {
        return true;
    };
}

componentDidUnmount(){
    window.onbeforeunload = null;
}

您可以将验证设置为仅在条件为 时添加警报true。

功能组件

useEffect(() => {
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }

    return () => {
        window.onbeforeunload = null;
    };
}, [condition]);

类组件

componentDidMount(){
    if (condition) {
        window.onbeforeunload = function() {
            return true;
        };
    }
}

componentDidUnmount(){
    window.onbeforeunload = null;
}