如何在 react-router v4 中的后退按鈕上顯示模態框？

Question

如果用戶在瀏覽器中單擊后退按鈕，如何顯示自定義模式框。 我已經有一個處理字段更改的模式框，我不想使用 Prompt 的window.confirm 。

Answer 1

1. 我的項目中有一個單獨的組件用於模態框，稱為“ Confirm ”，我在其他組件中使用它，我們將其稱為“ Sample ”。
2. 在我的Sample組件中，我維護一個狀態來管理該確認框的顯示。
3. 為了檢測瀏覽器/設備后退按鈕，我在useEffect函數中添加了一個事件，如下所示。

這是我的 goBackButtonHandler 函數。

此函數檢查是否有任何表單輸入字段是臟的。 如果是，我會顯示“確認”框，或者我只是返回上一頁。 我認為您可以對您的代碼使用類似的邏輯。

在我的應用程序中，我有返回和取消按鈕，因此對於應用程序內導航和瀏覽器/設備導航，我只需讓 React History API 調用

history.goBack();

這會觸發事件，如果我的字段很臟，我可以看到模態框。 而已！ 希望這會有所幫助。

Answer 2

假設您有一些頁面，並且所有頁面都包含在 Container 組件中，請嘗試以下操作：

class Container extends Component {

state = {
 showModal: false
}

handleBackClick(){
 this.props.history.push(this.props.location.pathname)
 this.setState({showModal: true})
}

componentDidMount(){
 window.onpopstate = this.handleBackClick.bind(this)
}

render(){
 return(
  <YourModal isOpen={this.state.showModal} ... />
 )
}

}

export default withRouter(Container)

您必須使用 withRouter 函數包裝 Container 才能訪問路由道具。