Question

来自<Prompt>的{{1}}组件似乎只监听react-router，只有在更改网址时才会执行此操作。

我想在用户刷新（F5）或关闭窗口时显示相同的history.block组件。我怎么能这样做？

Answer 1

这是通过JS阻止页面刷新的方法：

PromptComponent extends Component {      

  // Add a listener to prevent browser page refresh
  componentWillMount() {
    onbeforeunload = e => "Don't leave"
  }

  // Clear listener
  componentWillUnmount() {
    onbeforeunload = null
  }
}

点击此处：ONLINE

Answer 2

我知道这很老了，但似乎还是有流量的

  getSnapshotBeforeUpdate() {
    if (this.navigationPrompt()) {
      window.onbeforeunload = () => true
    } else {
      window.onbeforeunload = null
    }
    return null
  }

  componentWillUnmount() {
    onbeforeunload = null
  }

到目前为止，

是我的解决方案，但是它显示为默认警告-如果我弄清楚如何显示提示，我会进行更新

注意：

this.navigationPrompt()是我在提示中使用的同一逻辑控制器：

  <Prompt
    when={this.navigationPrompt()}
    message="It looks like you haven't sent your email, are you sure you want to leave?"
  />

在react-router上收听页面刷新和窗口关闭

2 个答案: