以前項(xiàng)目使用 react-router2.0， 業(yè)務(wù)層面頁面離開的時(shí)候需要彈出自己的彈出框，根據(jù)用戶的操作，進(jìn)行是否可以離開

? ? ? ?試了幾種方式都存在問題，實(shí)現(xiàn)的并不完美，沒辦法對用戶點(diǎn)擊瀏覽器后退支持的很好，除非是顯示系統(tǒng)默認(rèn)的confirm，同步處理

? ? ? ?1.setRouteLeaveHook

? ? ? ? ??

? ? ? ? ??setRouteLeaveHook沒有callback機(jī)制，只能是修改了變化標(biāo)志位，再push一遍，但是這個(gè)在實(shí)際情況也是有問題的，因?yàn)閔istory就一直是push了，跟用戶點(diǎn)后退不是一個(gè)交互了

? ? ? ? ? 2.onChange處理，?onChange可以在成功的時(shí)候，調(diào)用callback,但是用戶點(diǎn)擊瀏覽器后退的話，其實(shí)是沒有回調(diào)觸發(fā)的，不跳轉(zhuǎn)的情況下，沒辦法恢復(fù)url

? ? ? ? ??

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

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

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

?

? ? ? ? ? 網(wǎng)上還有自己創(chuàng)建history的方式，項(xiàng)目中沒有嘗試，項(xiàng)目升級到react-router4.0的時(shí)候解決了問題，解決方式其實(shí)上一篇中已經(jīng)寫明了。

? ? ? ? ? 1.getUserConfirmation，在 自己創(chuàng)建history 或者定義?HashRouter 的時(shí)候，設(shè)置確認(rèn)彈出框，通過callback異步處理

? ? ? ? ? ? ?

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

? ? ? ? ? ?

? ? ? ? ? ?message也可以是方式，這個(gè)看實(shí)際項(xiàng)目需求

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

轉(zhuǎn)載于:https://www.cnblogs.com/legu/p/7091443.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。