以前項目使用 react-router2.0， 業務層面頁面離開的時候需要彈出自己的彈出框，根據用戶的操作，進行是否可以離開

? ? ? ?試了幾種方式都存在問題，實現的并不完美，沒辦法對用戶點擊瀏覽器后退支持的很好，除非是顯示系統默認的confirm，同步處理

? ? ? ?1.setRouteLeaveHook

? ? ? ? ??

? ? ? ? ??setRouteLeaveHook沒有callback機制，只能是修改了變化標志位，再push一遍，但是這個在實際情況也是有問題的，因為history就一直是push了，跟用戶點后退不是一個交互了

? ? ? ? ? 2.onChange處理，?onChange可以在成功的時候，調用callback,但是用戶點擊瀏覽器后退的話，其實是沒有回調觸發的，不跳轉的情況下，沒辦法恢復url

? ? ? ? ??

? ? ? ? ? 其他情況下 ?頁面url不變化，

? ? ? ? ? ? ? ? ?a.可能是頁面跳轉,沒有使用hashHistory進行操作,直接操作了原生的location.history對象

? ? ? ? ? ? ? ? ?b.頁面刷新了測試，hashHistory對象length = 1,沒有地址可以回退

?

? ? ? ? ? 網上還有自己創建history的方式，項目中沒有嘗試，項目升級到react-router4.0的時候解決了問題，解決方式其實上一篇中已經寫明了。

? ? ? ? ? 1.getUserConfirmation，在 自己創建history 或者定義?HashRouter 的時候，設置確認彈出框，通過callback異步處理

? ? ? ? ? ? ?

? ? ? ? ?2.頁面離開通過，路由變化的時候的提示功能?Prompt 組件 ?https://reacttraining.com/react-router/core/api/Prompt?實現

? ? ? ? ? ?

? ? ? ? ? ?message也可以是方式，這個看實際項目需求

? ? ? ? ?3.操作history,需要使用路由的histroy對象，使用路由的組件和方法跳轉，不要和原生的location.history串用

轉載于:https://www.cnblogs.com/legu/p/7091443.html

總結

以上是生活随笔為你收集整理的react-router 页面离开 提示数据变更的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。