Question

要求：当点击按下#info路线以显示全屏覆盖组件的按钮时，关闭模式或按后退应取消覆盖，而不是转到上一页。 / p>

e.g。在第1页上，转到第2页。在第2页，按按钮显示叠加。按下或关闭叠加层应解除叠加并保留在第2页。

问题：当回到第2页时，我仍然有前进历史记录进入叠加路线。

我一直在搜索方法，但找不到删除前进历史记录的解决方案。

我的代码是这样的：如果显示叠加：

    var request = require("request");
    var ext = '/?__a=1';
    var username = //username here;


    request
      .get('https://www.instagram.com/'+ username + ext)
      .on('response', function(response) {
        console.log(response.statusCode) // 200 is what I get from request
        console.log(response.headers['content-type'])
      })

然后，当overylay关闭或按下后退按钮时，我有一个代码来goBack：

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

为了使用window.onpopstate检测后退按钮，我必须推送一条路线。当显示叠加时我试图用#info替换路由，然后在按下时关闭覆盖但我无法阻止路由默认。来自.g。（

有什么想法吗？

Answer 1

我无法找到防止转发或删除前置历史记录的方法，因此我最后的选择是使用哈希删除并在我向前突出时显示叠加并在我回击时隐藏：

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

这是要移除＃，如果我没有改变状态，那么push实际上会使用replace（），它不会让我处理onPopState。

然后我检查当我来回弹出时状态是否改变：

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

React Router回退阻止转发

1 个答案: