亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用React-Router檢測用戶離開頁面

使用React-Router檢測用戶離開頁面

縹緲止盈 2019-10-28 09:55:29
我希望我的ReactJS應用程序在離開特定頁面時通知用戶。特別是一條彈出消息,提醒他/她進行以下操作:“更改已保存,但尚未發布?,F在執行嗎?”我應該在react-router全局范圍內觸發此操作,還是可以在react頁面/組件內完成此操作?我還沒有發現任何關于后者的信息,我寧愿避免使用第一個。除非當然是其規范,否則這使我想知道如何執行這樣的事情而不必向用戶可以訪問的所有其他可能的頁面添加代碼。歡迎有任何見解,謝謝!
查看完整描述

3 回答

?
千巷貓影

TA貢獻1829條經驗 獲得超7個贊

react-routerv4引入了一種使用阻止導航的新方法Prompt。只需將其添加到您要阻止的組件中即可:


import { Prompt } from 'react-router'


const MyComponent = () => (

  <React.Fragment>

    <Prompt

      when={shouldBlockNavigation}

      message='You have unsaved changes, are you sure you want to leave?'

    />

    {/* Component JSX */}

  </React.Fragment>

)

這將阻止所有路由,但不會阻止頁面刷新或關閉。要阻止它,您需要添加以下內容(根據需要使用相應的React生命周期進行更新):


componentDidUpdate = () => {

  if (shouldBlockNavigation) {

    window.onbeforeunload = () => true

  } else {

    window.onbeforeunload = undefined

  }

}

onbeforeunload具有瀏覽器的各種支持。


查看完整回答
反對 回復 2019-10-28
?
弒天下

TA貢獻1818條經驗 獲得超8個贊

對于react-router2.4.0+


注意:建議將所有代碼遷移到最新版本,react-router以獲取所有新功能。


按照react-router文檔中的建議:


一個應該使用withRouter更高階的組件:


我們認為,這種新的HoC更好,更輕松,并且將在文檔和示例中使用它,但這并不是轉換的硬性要求。


作為文檔中的ES6示例:


import React from 'react'

import { withRouter } from 'react-router'


const Page = React.createClass({


  componentDidMount() {

    this.props.router.setRouteLeaveHook(this.props.route, () => {

      if (this.state.unsaved)

        return 'You have unsaved information, are you sure you want to leave this page?'

    })

  }


  render() {

    return <div>Stuff</div>

  }


})


export default withRouter(Page)


查看完整回答
反對 回復 2019-10-28
  • 3 回答
  • 0 關注
  • 2612 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號