詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法
更新時間：2018年05月08日 09:02:26 作者：Kindem
這篇文章主要介紹了詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
問題
今天在寫頁面的時候發(fā)現(xiàn)一個問題，就是在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參數(shù)的值，但是我發(fā)現(xiàn)如果你在這個url下只將url中的參數(shù)部分改變，比如channelId從1變成2的時候，頁面并不會刷新。
解決辦法
查閱資料后發(fā)現(xiàn)這樣的根本原因是props的改變并不會引起組件的重新渲染，只有state的變化才會引起組件的重新渲染，而url參數(shù)屬于props，故改變url參數(shù)并不會引起組件的重新渲染。
后來發(fā)現(xiàn)React的組件中有一個可復(fù)寫的方法
componentWillReceiveProps(nextProps) {
...
}
這個方法可以在React組件中被復(fù)寫，這個方法將會在props改變的時候被調(diào)用，所以你可以使用這個方法將nextProps獲取到，并且在這個方法里面修改state的內(nèi)容，這樣就可以讓組件重新被渲染。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React實現(xiàn)模糊搜索和關(guān)鍵字高亮的示例代碼
這篇文章主要為大家詳細(xì)介紹了React如何實現(xiàn)模糊搜索和關(guān)鍵字高亮的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
這篇文章主要介紹了React從Class方式轉(zhuǎn)Hooks詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-09-09
這篇文章主要介紹了React 元素渲染的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
TypeScript 實際上就是具有強(qiáng)類型的 JavaScript,可以對類型進(jìn)行強(qiáng)校驗,好處是代碼閱讀起來比較清晰,代碼類型出現(xiàn)問題時,在編譯時就可以發(fā)現(xiàn),而不會在運(yùn)行時由于類型的錯誤而導(dǎo)致報錯,這篇文章主要介紹了ReactJS中使用TypeScript的方法,需要的朋友可以參考下2024-04-04
react-redux是redux官方react綁定庫，能夠使react組件從redux store中讀取數(shù)據(jù)，并且向store分發(fā)actions以此來更新數(shù)據(jù)，這篇文章主要介紹了react-redux使用,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了React中獲取真實的dom的相關(guān)方法,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
react在安卓中輸入框被手機(jī)鍵盤遮擋問題的解決方法
這篇文章主要給大家介紹了關(guān)于react在安卓中輸入框被手機(jī)鍵盤遮擋問題的解決方法，文中通過圖文以及示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧2018-09-09
這篇文章主要為大家介紹了React中如何處理承諾demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React?正確使用useCallback?useMemo的方式
這篇文章主要介紹了React?正確使用useCallback?useMemo的方式，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了react實現(xiàn)拖拽模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08