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