React Router 使后退阻止前进

Question

要求： 当点击按钮推送#info 路由以显示全屏覆盖组件时，关闭模式或按返回应该关闭覆盖而不是转到上一页。

例如在第 1 页，转到第 2 页。在第 2 页，按按钮显示覆盖。按后退键或关闭叠加层应该关闭叠加层并保留在第 2 页。

问题：回到第 2 页时，我仍然有转到覆盖路由的转发历史记录。

我找了很多方法都找不到删除转发历史记录的解决方案。

我的代码是这样的：如果显示覆盖：

this.props.router.push(this.props.router.getCurrentLocation().pathname + '#info')

然后我有一个代码可以在覆盖层关闭或按下后退按钮时返回：

onBackButtonEvent () {
  if (this.props.renderOverlay) {
    this.setState({
      overlayRoutePushed: false
    })
    this.props.closeOverlay()
  }
}

closeOverylayAndBack () {
  this.setState({
    overlayRoutePushed: false
  })
  this.props.closeOverlay()
  this.props.router.goBack()
}

componentDidMount () {
  window.onpopstate = this.onBackButtonEvent
}

为了用 window.onpopstate 检测后退按钮，我必须推送一条路线。我尝试在显示覆盖时用#info 替换Route，然后在按下时关闭覆盖，但我无法阻止 route.goBack().

的默认设置

有什么想法吗？

Answer 1

我找不到阻止转发或删除转发历史记录的方法，所以我最后的办法是使用散列删除，并在我向前点击时显示叠加层并在我返回时隐藏：

this.props.router.push({
    pathname: this.props.router.getCurrentLocation().pathname,
    state: {overlay: true}
 })

这是为了删除 #，如果我不更改状态，推送实际上将使用 replace()，它不会让我处理 onPopState。

然后我来回pop的时候看看state有没有变化:

componentWillReceiveProps (nextProps) {
    if (nextProps.router.location.state) {
         if (nextProps.router.location.state.overlay) {
             this.showOverylay()
         }
     }
 }

React Router 使后退阻止前进

React Router make back prevent forward

javascript

reactjs

router

browser-history