reactjs - react-router:beforeunload 事件不适用于路由更改

Question

这是我的代码:

constructor( props ) {
super( props )
this.state = {
  newOrganizationCountry            : ''
}
this.handleChange = this.handleChange.bind( this )
this.handleSubmit = this.handleSubmit.bind( this )
this.handleChangeOfTimeZone = this.handleChangeOfTimeZone.bind( this )    

this.onUnload = this.onUnload.bind(this); // if you need to bind callback to this
    this.handleChangeOfStartDate = this.handleChangeOfStartDate.bind( this )
{ 
  /* 
  -> Time Zone detail
  -> https://raw.githubusercontent.com/yury-dymov/react-bootstrap-timezone-picker/master/src/timezones.json
  */ 
}


onUnload(event) { // the method that will be used for both add and remove event
  console.log("hellooww")
  event.returnValue = "Hellooww"
}

componentWillMount() {
      window.removeEventListener("beforeunload", this.onUnload)

}


componentDidMount() {
if(this.state!=null){
      window.removeEventListener("beforeunload", this.onUnload)
    }
}

当我更改表单中的某些内容并关闭窗口并要求我确认退出时，这会起作用。但是我希望它在我单击另一个页面/链接/路由时起作用。请给我任何有效的建议。谢谢

Answer 1

当你点击 react-router 中的任何 Link 时，新链接将被推送到你的浏览器历史记录中。所以这只是虚拟更改链接并且有 preventDefault()

您不能这样做，但是例如您可以向页面中的所有链接添加一个事件，以便在您想要退出当前页面时显示一条消息。