发现问题
同一个组件根据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,
});
});
}
}