umi监听路由参数变化

前言：

下午去帮小组伙伴看问题，路由参数发生改变，但是页面无法拿到最新的参数数据，做数据动态加载。

左侧为父级路由，右侧为子集数据，右侧可能是多个菜单指向一个页面，但参数不一样，而起初这样写,在生命周期里获取。但是这个周期函数只会触发一次

父页面

 import React, { useState } from 'react';
import { history } from 'umi';


class LoyoutDemo extends React.Component {
    fns = (src:string, id:string)=>{
        history.push({
            pathname: src,
            query: {
              id
            },
        });
    }

    render() {
      return (
          <div>
            <div>
                <span onClick={ this.fns.bind(this,'/LoyoutDemo/chidDemo1', '1') } style={{ 'background':'red' }}>数据1</span>
                <span onClick={ this.fns.bind(this,'/LoyoutDemo/chidDemo1', '2') } style={{ 'background':'blue' }}>数据2</span>
                <span onClick={ this.fns.bind(this,'/LoyoutDemo/chidDemo2', '3') } style={{ 'background':'orange' }}>数据3</span>
            </div>
            <div>
                { this.props.children }
            </div>
          </div>
      )
    }
}

export default LoyoutDemo;

componentDidMount(){
  console.log(location.query)
}

所以后面，当参数发生改变的时候，是不会再触发的。

查看umi文档后，发现有这个API，只有路由参数发生改变，就会触发，那就好办了
https://umijs.org/zh-CN/api#history

componentDidMount(){
    history.listen((location, action) => {
      console.log(location.query)
    })
  }