javascript - react 历史记录替换不允许后退按钮

Question

我知道从技术上讲不可能禁止用户单击浏览器的后退按钮，但有时在我们的应用程序中允许这种操作是没有意义的。

例如，在我的工作申请应用程序中，申请后您会转到下一页，

this.props.applyJob({
      id: this.state.selectedAd_Id,
      applicant_id
    }).then(response => {
      if(response.value.status === 200){
        const { id } = response.value.data.result
        this.props.history.replace(`/job/applied/${id}`)
      }
    })

but user still can go to the previous page which doesn't make sense, how to handle that?

Answer 1

您可以尝试某种 onunload 函数。如果用户单击您希望他们单击​​的按钮，您必须设置一个变量，这样他们就不会收到警告消息。

    var showAlert= 1; // this is set to it will show warning when leaving the page

    // if they click your next button add this to a function
    // showAlert =0;

window.onbeforeunload = function(){
    if (showAlert == 1)
  return 'Please use the Next and Previous buttons and not the browser back buttons to ensure your date is saved.';
};