Остановить перемонтирование при изменении маршрута

Question

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import CompA from './comp-a';
import CompB from './comp-b';

import {Route, Switch, Link} from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div className="App">
          <Link to="/ca" >ca</Link>
          <br/>
          <Link to="/cb" >cb</Link>
          <div>
              <Switch>
                  <Route exact path="/ca" render={()=><CompA/>}/>
                  <Route exact path="/cb" render={()=><CompB/>}/>
              </Switch>
          </div>

      </div>
    );
  }
}

export default App;

Есть два компонента A и B. В компоненте A у меня есть graphQL QueryRenderer, который выполняет вызов API для извлечения данных и отображения. Компонент B - это другой другой фиктивный компонент. Изначально отображается компонент A, а GraphQL извлекает данные и визуализируется пользовательский интерфейс. Теперь я ориентируюсь к компоненту B, а затем обратно к компоненту A. Маршрут заставляет Компонент A перемонтировать, поэтому вызывается componentenetWullMount, а затем метод render, который заставляет снова получать данные из API. Как мы можем сделать один и тот же экземпляр компонента A? Любая помощь будет оценена