背景
項目中經常出現頁面間跳轉並需要攜帶參數的情況,我們使用了react-router組件實現。
問題
通過this.props.history.push(url, state)方法進行頁面跳轉同時帶上state參數,但帶參數到目標頁面后刷新目標頁面參數仍然存在。如存在頁面A和頁面B,當頁面A帶參數sysName=XXX跳轉頁面B,頁面B打開后收到參數XXX並展示XXX的相關內容,在用戶主動刷新頁面B的時候,this.props.history.location.state的參數是仍然存在的,所以頁面B還會繼續顯示XXX的相關內容。
解決辦法
當目標頁面初始化時判斷當前路由有帶參數過來,將參數取出來,同時覆蓋參數,當用戶再次主動刷新目標頁面時,路由中的參數已經沒有了,就能進行正常的初始化邏輯。
通過history對象的replace方法實現:this.props.history.replace(當前url, {}),這樣操作會替換掉state但不會刷新頁面。