Reactjs 在react js上显示浏览器后退按钮事件警报

我必须在React js上显示浏览器返回事件的警报。我尝试过使用

addEventListener

，但我不确定在React页面中放置代码的位置。我应该在任何生命周期挂钩或渲染中放置吗？我不确定。请帮帮我。

你可以试试这个

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

您可以根据需要将其放置在

componentWillMount（）

或

componentDidMount（）

中

查看此链接

这里的要点是：

document.onmouseover = function() {
    //User's mouse is inside the page.
    window.innerDocClick = true;
}

document.onmouseleave = function() {
    //User's mouse has left the page.
    window.innerDocClick = false;
}

window.onhashchange = function() {
    if (window.innerDocClick) {
        //Your own in-page mechanism triggered the hash change
    } else {
        //Browser back button was clicked
    }
}

这将防止使用后台空间向后导航

 $(function(){
        /*
         * this swallows backspace keys on any non-input element.
         * stops backspace -> back
         */
        var rx = /INPUT|SELECT|TEXTAREA/i;

        $(document).bind("keydown keypress", function(e){
            if( e.which == 8 ){ // 8 == backspace
                if(!rx.test(e.target.tagName) || e.target.disabled || e.target.readOnly ){
                    e.preventDefault();
                }
            }
        });
    });

---

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

首先，在

componentdiddupdate

或

componentWillMount

hook中添加以下代码：

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

因此，当单击back browser（返回浏览器）按钮时，同一页面将再次重新加载，因为历史记录已由

pushState

方法操作

然后在

pushState

方法上方添加以下代码：

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

---

现在，当点击浏览器后退按钮时，将调用上述偶数侦听器，因为我们更新了

状态

，而该状态是

推送状态

方法，

如果

是真的，你可以在里面做你想做的任何事情。

我已经尝试了很多解决方案，但是在我的情况下，没有一个是有效的

componentDidMount（）{
window.addEventListener（“卸载前”，此项确认）；
window.history.pushState（null，“，window.location.href）；
window.onpopstate=此参数。\u backConfirm；
}
组件将卸载（）{
window.removeEventListener（“在卸载之前”，这是确认）；
window.onpopstate=（）=>{}
}
_backConfirm=async（）=>{
让event=window.confirm（“可能无法保存的更改”）；
如果（事件）{
window.history.pushState（null，“，window.location.href）；
}
}
_确认=（e）=>{
var confirmationMessage=“\o/”；
e、 returnValue=确认消息；
返回确认消息；
}

我找到了这个解决方案，它对我来说运行良好

constructor(props) {
    super(props);
    this.state = {
        onClickBackButton: false
    };
}
componentDidMount() {
   window.history.pushState(null, null, window.location.pathname);
   window.addEventListener('popstate', this.onClickBackButton);
}

onBackButtonEvent = (e) => {
    e.preventDefault();
    if (!this.onClickBackButton) {

        if (window.confirm("Do you want to go back without submitting details?")) {
            this.onClickBackButton= true;
            // your custom logic to page transition,like react-router-dom 
            history.push()
        } else {
            window.history.pushState(null, null, window.location.pathname);
            this.onClickBackButton= false;
        }
    }
}

componentWillUnmount = () => {
    window.removeEventListener('popstate', this.onClickBackButton);
}

---

如果您使用react钩子，您可以在下面的步骤中使用useffect钩子

import React，{useState，useffect}来自“React”；
const[finishStatus，setfinishStatus]=useState（false）；
const onBackButtonEvent=（e）=>{
e、 预防默认值（）；
如果（！finishStatus）{
if（window.confirm（“是否要返回？”））{
setfinishStatus（真）
//你的逻辑
props.history.push（“/”）；
}否则{
window.history.pushState（null，null，window.location.pathname）；
setfinishStatus（错误）
}
}
}
useffect（（）=>{
window.history.pushState（null，null，window.location.pathname）；
addEventListener（'popstate'，onBackButtonEvent）；
return（）=>{
removeEventListener（'popstate'，onBackButtonEvent）；
};
}, []);我想在React JS中完全做到这一点。你只需要适应它。这些示例只是为您提供事件侦听器名称。例如，我有一个名为
payment.js
的页面，用于呈现付款页面视图。因此，当用户尝试单击该页面上的browser back按钮时，我是否可以显示payment.js本身上写的警报？我会尝试，但我还有一个问题。浏览器返回事件是否会调用
componeneWillMount（）
或
componentDidMount（）
钩子？@ashokraghu当您点击浏览器返回按钮时，您的组件将简单地重新呈现，以便执行这些方法。我使用过，但它仅显示在页面加载上，而不是在浏览器返回按钮上。例如，我有一个名为
payment.js
的页面，用于呈现付款页面视图。因此，当用户尝试单击该页面上的浏览器后退按钮时，我是否可以显示写在
payment.js
本身上的警报？它只在第一次工作。在那之后，这就像一个符咒，谢谢！