Dodanie klasy do elementu w momencie ładowania [React.JS]

Cześć! Mam do oprogramowania zaznaczenie aktywnego elementu w pasku menu i jest on z animacją. Postanowiłem po kliknięciu dodać klasę active z animacją do elementu jednak każdy element przenosi do innej strony i powoduje przeładowanie całego DOM w tym komponentu z menu co daje brak dodanej klasy. Próbowałem rozwiązać problem poprzez local storage(zapisywałem pełną klasę elementu który ma active a później ją odczytywałem w konstruktorze tj. przy ponownym ładowaniu na innej stronie). Jednak to rozwiązanie powoduje że animacja obrazka pojawia się dopiero po załadowaniu elementów DOM a jest w niej zawarte uniesienie się elementu menu i daje to efekt podskakującego elementu. Czy jest możliwość dodania klasy już w odpowiednim momencie przy ładowaniu nowej strony? Oto mój kod:

 class MenuBar extends React.Component {
    constructor() {
      super();
    this.getActiveTab();
    }

    setActiveTab(e){
        let elements = document.querySelectorAll('.menu-icon');
        elements.forEach(link => {
            if(e.target.className === link.className){
                //save clicked element class to local storage
                localStorage.setItem('activeTabClass',link.className);
                //add active class
                e.target.className.add('icon-active');
            }
        })
    }

    getActiveTab() {
        //read activeTab data for state before reload or go to next link
        let activeTab = localStorage.getItem('activeTabClass');
        let elements = document.querySelectorAll('.menu-icon');
        elements.forEach(link => {
            if(link === activeTab){
                link.className.add('icon-active');
            }
        });
        //set local storage as empty for non menu elements on the page
        localStorage.setItem('activeTabClass','');
    }

    render() {
      return <nav classname="nav menu-bar">
            <a href='/page1/terms'><i classname="menu-icon icon-1" onClick={this.setActiveTab.bind(this)}/></a>
            <a href='/page2/index'><i classname="menu-icon icon-2" onClick={this.setActiveTab.bind(this)}/></a>
            <a href='/page3/about'><i classname="menu-icon icon-3" onClick={this.setActiveTab.bind(this)}/></a>
            <a href='/page4/photos'><i classname="menu-icon icon-4" onClick={this.setActiveTab.bind(this)}/></a>
            </nav>;
    }
  };

  export default MenuBar;

Ogólny efekt ma być tak że animacja pojawia się po kliknięciu obrazkowego elementu menu, strona przechodzi na podany URL i stan tego elementu jest taki jak ma być po animacji elementu z klasą active czyli obrazek lekko do góry. Po prostu wyróżnienie wybranego elementu i zachowanie takiego jego stanu po przejściu na stronę.