react-router 頁面離開 提示數據變更


以前項目使用 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串用


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM