Question

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

我使用javascript函数

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

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

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

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

这里我在stackblitz

上有完整的代码

Answer 1

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

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

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

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

功能组件

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;
}

Answer 4

如果您使用的是REDUX或CONTEXT API，则非常简单。您可以检查REDUX或CONTEXT状态变量。用户刷新页面时，它将重置“上下文”或“ REDUX”状态，您必须再次手动设置它们。因此，如果未将其设置为等于您提供的初始值，则可以假定页面已刷新。

Answer 5

您的代码似乎工作正常，您的警报因为您没有停止刷新而无法正常工作。如果您console.log('hello')显示输出。

更新---

这应该会阻止用户刷新，但这取决于你想要发生什么。

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

Answer 6

不幸的是，由于performance.navigation.type为deprecated

，因此当前接受的答案不能再被认为是可以接受的

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

反应|如何检测页面刷新（F5）

6 个答案:

功能组件

类组件

功能组件

类组件