react-router V4 如何区分浏览器后退/前进行为和react-router后退/前进行为

Question

在页面中有一个按钮点击后会使页面后退

  goback=()=>{
      this.props.history.goBack()  
  }
  push=()=>{
      this.props.history.push()  
  }

后退到上一级的时候如何区分是通过this.props.history.goBack()/this.props.history.push() 方法后退/前进，还是点击浏览器左上角的后退/前进按钮。

Answer 1

我前段时间也研究了一下这个问题，目前我只发现可以监听浏览器返回和前进按钮，但是不能区分返回和前进，而router的返回和前进与浏览器的返回前进区分非常容易，因为router是通过click事件来触发的，所以只需要在click函数里面执行你的函数。

监听浏览器返回和前进

    window.addEventListener('hashchange', () => {
           //触发函数
        })
    }

Answer 2

可以通过this.props.history.action来进行判断：就我所知action分为push和pop两种，push是通过路由，pop是通过goback；浏览器的前进后退按钮似乎都是pop，我不确定，你可以监测一下

Answer 3

goBack()浏览器，完美回退，连滚动条都给你记录了

push()路由，重新渲染

你试试啊，不就知道了。