詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法

發(fā)布時(shí)間：2020-08-30 04:03:23 來源：腳本之家閱讀：1326 作者：Kindem 欄目：web開發(fā)

問題

今天在寫頁面的時(shí)候發(fā)現(xiàn)一個(gè)問題，就是在React Router中使用了Url傳參的功能，像這樣:

export class MainRouter extends React.Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          ...
          <Route exact path={'/channel/:channelId'} component={ChannelPerPage}/>
          ...
        </Switch>
      </BrowserRouter>
    );
  }
}

按照官方文檔的說法，可以在ChannelPerPage這個(gè)組件中使用

this.props.match.params

來獲取url參數(shù)的值，但是我發(fā)現(xiàn)如果你在這個(gè)url下只將url中的參數(shù)部分改變，比如channelId從1變成2的時(shí)候，頁面并不會(huì)刷新。

解決辦法

查閱資料后發(fā)現(xiàn)這樣的根本原因是props的改變并不會(huì)引起組件的重新渲染，只有state的變化才會(huì)引起組件的重新渲染，而url參數(shù)屬于props，故改變url參數(shù)并不會(huì)引起組件的重新渲染。

后來發(fā)現(xiàn)React的組件中有一個(gè)可復(fù)寫的方法

componentWillReceiveProps(nextProps) {
 ...
}

這個(gè)方法可以在React組件中被復(fù)寫，這個(gè)方法將會(huì)在props改變的時(shí)候被調(diào)用，所以你可以使用這個(gè)方法將nextProps獲取到，并且在這個(gè)方法里面修改state的內(nèi)容，這樣就可以讓組件重新被渲染。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

詳解React-Router中Url參數(shù)改變頁面不刷新的解決辦法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽