每次更改路线时都会重新加载组件，同时发生路由更改和API调用

Question

我在componentDidMount中调用我的API并使用react路由器，当我的路由更改时，该API再次被调用并且数据开始获取。由于数据很大，因此加载需要时间。我试图每次更改路线时都避免API调用。 下面是我的代码-

  componentDidMount(){
    CommonService.getDishData().then((res)=> {
      this.setState({data: res, dishData: res, loader: false})
    });
  }

这是我在CommonService中的代码-

    // FETCHING DISHES FROM DB
    static getDishData(){
        let index = { i: 10 }
        let finalUrl = `${this.server}dishes/`;
        return fetch(finalUrl, index)
        .then(res => res.json())
        .then(res => {
            return Promise.resolve(res);
        })
    }

请帮助我解决此数据重新获取问题。预先谢谢你。