React-Router中Url不刷新的情況下改變參數

這次為大家帶來React-Router中Url不刷新的情況下改變參數，React-Router中Url不刷新改變參數的注意事項有哪些，下面就是實戰案例，一起來看一下。

問題

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

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={&#39;/channel/:channelId&#39;} 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中文網其它相關文章！

推薦閱讀：

vue2.0實作輸入框即時擷取更新步驟詳解

JS實作簡單購物車功能程式碼分析

以上是React-Router中Url不刷新的情況下改變參數的詳細內容。更多資訊請關注PHP中文網其他相關文章！