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();
    }
  }

这样刷新就正常了