Ant Design Pro路由参数改变页面没有重新渲染问题的解决

文章目录

• 发现问题
• 解决问题

发现问题

同一个组件根据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 路由参数改变 页面没有重新渲染刷新