Компонент перезагружается при изменении маршрута и вызов API каждый раз, когда он перезагружается.

Question

Я вызываю свой API в componentDidMount и использую реагирующий маршрутизатор, когда мой маршрут изменяется, 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);
        })
    }

Пожалуйста, помогите мне исправить эту перегрузку данных. Заранее спасибо.