在使用Antd Pro的时候，我做了这样一张页面，二级模板页，左边是菜单，右边是详情
我在router.config.js文件中这样设置路由，这边用到了/:id去传递参数
1 { 2 path:‘/catalog‘, 3 name:‘综合目录‘, 4 icon:‘bars‘, 5 component:‘./Catalog/Info‘, 6 routes:[ 7 { 8 path:‘/catalog‘, 9 redirect: ‘/catalog/survey‘, 10 }, 11 { 12 path:‘/catalog/survey‘, 13 component:‘./Catalog/Survey‘ 14 }, 15 { 16 path:‘/catalog/engineering/:id‘, 17 component:‘./Catalog/Engineering‘ 18 }, 19 { 20 path:‘/catalog/bidsection/:id‘, 21 component:‘./Catalog/Bidsections‘ 22 }, 23 { 24 path:‘/catalog/project/:id‘, 25 component:‘./Catalog/Project‘ 26 } 27 ] 28 },
问题出现了,比如页面初次访问 /catalog/engineering/1 的时候页面显示正常无误，但是页面再访问 /catalog/engineering/2 的时候页面却没有重新渲染。
我通过设置断点（debugger）了解到其实是详情部分的子页面没有重新进入构造函数（ constructor(props) ），这边需要重申一下React生命周期，你会发现有个componentWillReceiveProps。
componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染。
因此我在子页面里面加了如下代码：
1 componentWillReceiveProps = (nextProps) => { 2 const { match } = this.props; 3 if(match.params.id !== nextProps.match.params.id){ 4 this.Id = nextProps.match.params.id; 5 this.getData(); 6 } 7 }
这样刷新就正常了
React 关于Antd Pro 路由参数改变 页面没有重新渲染刷新
原文：https://www.cnblogs.com/CoffeeEddy/p/10688182.html