React-Router中Url改變參數并且不刷新頁面方法有哪些

問題

今天在寫頁面的時候發現一個問題，就是在React Router中使用了Url傳參的功能，像這樣:

export class MainRouter extends React.Component {
 render() {
 return (
 <BrowserRouter>
 <Switch>
 ...
 <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/>
 ...
 </Switch>
 </BrowserRouter>
 );
 }
}

按照官方文檔的說法，可以在ChannelPerPage這個組件中使用

this.props.match.params

來獲取url參數的值，但是我發現如果你在這個url下只將url中的參數部分改變，比如channelId從1變成2的時候，頁面并不會刷新。

解決辦法

查閱資料后發現這樣的根本原因是props的改變并不會引起組件的重新渲染，只有state的變化才會引起組件的重新渲染，而url參數屬于props，故改變url參數并不會引起組件的重新渲染。

后來發現React的組件中有一個可復寫的方法

componentWillReceiveProps(nextProps) {
 ...
}

這個方法可以在React組件中被復寫，這個方法將會在props改變的時候被調用，所以你可以使用這個方法將nextProps獲取到，并且在這個方法里面修改state的內容，這樣就可以讓組件重新被渲染。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

推薦閱讀：

JS callback回調函數使用案例詳解

JS DOM元素常見增刪改查操作詳解

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com