文章目录

发现问题

同一个组件根据Ant Pro路由传递进来的user和menu两个参数实现不同页面的渲染效果，测试发现页面在第一次渲染时没有问题，改变参数重新渲染则不刷新，如下所示：

/users/admin/menus/chargingPile渲染充电桩页面成功

/users/admin/menus/airCondition渲染空调页面失败

最终发现应该使用React生命周期函数componentWillReceiveProps来实现这个功能，

componentWillReceiveProps在初始化render的时候不会执行，它会在Component接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染，生命周期函数图下：

解决问题

在componentWillReceiveProps中比较前次props和本次props差异，如果有差异则重新获取数值并改变state，通过state的更新渲染页面，相关代码如下：

菜单文件router.config.js

{path: '/consumption/svg/users/:user/menus/:menu',icon: 'project',component: './Aardvark/Consumption/SvgPage',},{path: '/consumption/svg/users/admin/menus/chargingPile',name: '充电桩',icon: 'project',component: './Aardvark/Consumption/SvgPage',},{path: '/consumption/svg/users/admin/menus/airCondition',name: '空调',icon: 'project',component: './Aardvark/Consumption/SvgPage',},

组件文件

componentDidMount() {const {match: {params: {menu, user },},} = this.props; // 获取Ant Pro路由传递的参数this.menu = menu; this.user = user;getSvgPath(this.user, this.menu).then(data => {this.setState({path: data,});});}componentWillReceiveProps(nextProps) {const {match: {params: {menu, user },},} = this.props;// 比较本次路由传递的参数和下次路由传递的参数值是否一致// 不一致重新获取数据更改state实现页面刷新if (menu !== nextProps.match.params.menu || user !== nextProps.match.params.user) {this.menu = nextProps.match.params.menu;this.user = nextProps.match.params.user;getSvgPath(this.user, this.menu).then(data => {this.setState({path: data,});});}}

参考文章React 关于Antd Pro 路由参数改变 页面没有重新渲染刷新