問題

今天在寫頁面的時候發現一個問題，就是在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的內容，這樣就可以讓組件重新被渲染。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。