這次為大家帶來React-Router中Url不刷新的情況下改變參數,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的內容,這樣就可以讓元件重新被渲染。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是React-Router中Url不刷新的情況下改變參數的詳細內容。更多資訊請關注PHP中文網其他相關文章!