React 關於Antd Pro 路由參數改變 頁面沒有重新渲染刷新

在使用Antd Pro的時候，我做了這樣一張頁面，二級模板頁，左邊是菜單，右邊是詳情

我在router.config.js文件中這樣設置路由，這邊用到了/:id去傳遞參數

 {
        path:'/catalog',
        name:'綜合目錄',
        icon:'bars',
        component:'./Catalog/Info',
        routes:[
          {
            path:'/catalog',
            redirect: '/catalog/survey',
          },
          {
            path:'/catalog/survey',
            component:'./Catalog/Survey'
          },
          {
            path:'/catalog/engineering/:id',
            component:'./Catalog/Engineering'
          },
          {
            path:'/catalog/bidsection/:id',
            component:'./Catalog/Bidsections'
          },
          {
            path:'/catalog/project/:id',
            component:'./Catalog/Project'
          }
        ]
      },

問題出現了,比如頁面初次訪問  /catalog/engineering/1  的時候頁面顯示正常無誤，但是頁面再訪問  /catalog/engineering/2  的時候頁面卻沒有重新渲染。

我通過設置斷點（debugger）了解到其實是詳情部分的子頁面沒有重新進入構造函數（ constructor(props) ），這邊需要重申一下React生命周期，你會發現有個componentWillReceiveProps。

componentWillReceiveProps在初始化render的時候不會執行，它會在Component接受到新的狀態(Props)時被觸發，一般用於父組件狀態更新時子組件的重新渲染。

 因此我在子頁面里面加了如下代碼：

componentWillReceiveProps = (nextProps) => {
    const { match } = this.props;
    if(match.params.id !== nextProps.match.params.id){
      this.Id = nextProps.match.params.id;
      this.getData();
    }
  }

這樣刷新就正常了