popstate事件需要和浏览器交互才能触发

Question

问题描述

在chrome里面从a页面跳转到该页面之后必须和浏览器交互（比如点击页面）之后再点击浏览器的后退按钮才能正常触发popstate的跳转，在firfox正常监听操作前进后退跳转两次之后也失效

问题出现的环境背景及自己尝试过哪些方法

MacOS，Chrome75.0.3770.100 firfox最新版

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
import React, { Component } from 'react'
export default class NotFound extends Component {
componentDidMount(){

this.goBack()

}
componentWillUnmount(){

window.removeEventListener('popstate',this.goNewPage)

}
goBack=()=>{

window.history.pushState(null,'', document.URL)
window.addEventListener('popstate', this.goNewPage)

}
goNewPage=()=>{

window.location.href='https://www.baidu.com'

}
render() {

return (
  <div >
    aaa
  </div>
)

}
}

Answer 1

https://developer.mozilla.org...
https://developer.mozilla.org...
当活动历史记录条目更改时，将触发popstate事件。如果被激活的历史记录条目是通过对history.pushState（）的调用创建的，或者受到对history.replaceState（）的调用的影响，popstate事件的state属性包含历史条目的状态对象的副本。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。

Answer 2

遇到的同样的问题，只有在页面上点击之后才会触发监听后退的事件