react路由参数改变，刷新页面

需求：当页面url从‘/test?id=01’变成’/test?id=02’时，接口需要根据参数获取最新数据并且渲染页面。
解决方案：
方式一：react16之前推荐使用componentWillReceiveProps生命周期

import React, { Component } from 'react'
import router from 'umi/router';

export class Index extends Component {
  state = {
    storageId: ''
  }
  componentDidMount() {
    const { id } = this.props.location.query;
    this.setState({
      storageId: id
    })

  }
  componentWillReceiveProps(nextProps) {
    const { id } = nextProps.location.query;
    const { storageId } = this.state;
    if (id && storageId && storageId !== id) {
      this.setState({
        storageId: id
      })
    }
  }
  render() {
    return (
      <div>
        <button onClick={() => { router.push('/index?id=111') }}>按钮1</button>
        <button onClick={() => { router.push('/index?id=222') }}>按钮2</button>
      </div>
    )
  }
}

export default Index

方式二：React16推荐使用static getDerivedStateFromProps +componentDidUpdate

import React, { Component } from 'react'
import router from 'umi/router';

export class Index extends Component {
  state = {
    storageId: ''
  }
  componentDidMount() {
    const { id } = this.props.location.query;
    this.setState({
      storageId: id
    })
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    //该方法内禁止访问this
    const { id } = nextProps.location.query;
    if (id !== prevState.storageId) {
      //通过对比nextProps和prevState，返回一个用于更新状态的对象
      return {
        storageId: id
      }
    
    }
    //不需要更新状态，返回null
    return null
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.state.storageId !== prevState.storageId) {
     //在这可以做你自己的需求
     ......
    }
  }
  render() {
    return (
      <div>
        <button onClick={() => { router.push('/index?id=111') }}>按钮1</button>
        <button onClick={() => { router.push('/index?id=222') }}>按钮2</button>
      </div>
    )
  }
}

export default Index