2021年8月24日,開發公司的react H5項目,遇到了一個bug,關於動態路由切換組件沒有重新掛載的問題
事情的原因是這樣的,我開發一個頁面,是一個培訓平台的課程詳情,然后頁面上有關聯的其他課程,我發現在在跳轉的時候,路由改變了, 但是頁面沒刷新,換句話說,頁面也刷新了,但是沒有重新加載組件,即沒有重新調用接口,從后台獲取數據。
簡單描述,就是一個detail頁面中跳到其他detail頁面中,組件沒有重新掛載,解決方法,在處理成路由組件時,對組件進行處理,添加key,一旦key不同,則會重新掛載組件,不會復用之前的組件。
export withRouter((props)=><UserAccount {...props} key={props.location.pathname})