鍍金池/ 問答/HTML5  HTML/ react-router4怎么在路由變化時重新渲染同一個組件？

react-router4怎么在路由變化時重新渲染同一個組件？

剛開始我的地址是：http://192.168.1.74:3000/#/houseDetail/788052?ldbh=29430025。
然后我點擊下一條時：

history.push({
            pathname: '/houseDetail/' + nextFwbh,
            search: `ldbh=${nextLdbh}`
        })

地址會變成http://192.168.1.74:3000/#/houseDetail/788053?ldbh=29430025，但是因為是同一個組件，這時頁面不會重新加載，只是路由變了，有沒有什么方法能夠是路由重新渲染當前的組件？

回答
編輯回答
淺淺

你確定它沒有進入更新階段？

2017年3月10日 21:35
編輯回答
柚稚

可以在這個組件的componentWillReceiveProps方法中去判斷，當url變化時，這個方法會被調(diào)用，通過props.match.params獲取最新url參數(shù)，然后執(zhí)行相關(guān)邏輯。

2017年9月23日 19:13
編輯回答
別逞強

可以用 history 中的 listen 方法監(jiān)聽 url 的變化，然后通過 state 的變化觸發(fā)渲染。

this.unlisten = history.listen(location => {
  this.setState({ pathname: location.pathname });
});
2017年5月31日 23:23
編輯回答
傲嬌范

在路由跳轉(zhuǎn)的地方加入KEY是一個辦法。

<Route path='/sdspace/offline/:id/detail' exact component={SdSpace.Detail} key={new Date().getTime()} />
<Route path='/sdspace/offline/:id/edit' exact component={SdSpace.Detail} key={new Date().getTime()} />
2018年2月22日 07:19
編輯回答
久舊酒
export default function (props) {
  return (<組件 {...props} key={search參數(shù)} />)
}

重新封裝一下組件，加入一個key

2017年10月30日 16:15