您好,登錄后才能下訂單哦!
問題
今天在寫頁面的時候發現一個問題,就是在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的內容,這樣就可以讓組件重新被渲染。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。