在反应 js 上显示浏览器后退按钮事件的警报

Question

我必须在 React js 上的浏览​​器返回事件上显示警报。我曾尝试使用 ，addEventListener但我不确定将代码放置在 React 页面中的何处。我应该放置在任何生命周期钩子中还是在渲染中？我不知道。请帮帮我。

Answer 1

你可以试试这个，

window.addEventListener('popstate', (event) => {
  alert("You message");
});

您可以将其放置在componentWillMount()或componentDidMount()根据您的需要。

参考号

Answer 2

如果您使用反应钩子，您可以使用 useEffect 钩子在以下步骤中完成

import React, { useState, useEffect } from "react";

const [finishStatus, setfinishStatus] = useState(false);

const onBackButtonEvent = (e) => {
    e.preventDefault();
    if (!finishStatus) {
        if (window.confirm("Do you want to go back ?")) {
            setfinishStatus(true)
            // your logic
            props.history.push("/");
        } else {
            window.history.pushState(null, null, window.location.pathname);
            setfinishStatus(false)
        }
    }
}

  useEffect(() => {
    window.history.pushState(null, null, window.location.pathname);
    window.addEventListener('popstate', onBackButtonEvent);
    return () => {
      window.removeEventListener('popstate', onBackButtonEvent);  
    };
  }, []);

Answer 3

最后我自己解决了。我已经用下面的代码给出了解释：

componentDidUpdate首先，在or钩子中添加以下代码componentWillMount：

window.history.pushState({name: "browserBack"}, "on browser back click", window.location.href);
window.history.pushState({name: "browserBack"}, "on browser back click", window.location.href);

我之所以推送两次，是因为只有推送两次，状态才会更新。这是参考号。上面的代码将在页面加载时将当前页面的 URL 推送到历史记录中。

因此，当单击后退浏览器按钮时，由于该方法已操纵历史记录，因此将再次重新加载同一页面pushState。

然后在该方法上方添加以下代码pushState：

window.addEventListener('popstate', (event) => {
  if (event.state) {
    //do your code here
  }
 }, false);

现在，当单击浏览器后退按钮时，上面的事件侦听器将被调用，并且由于我们更新了statewhichpushState方法，因此该方法if将为 true，您可以在其中执行您想做的任何操作。