ReactJS - переключение вкладок вызывает нежелательную прокрутку в верхнем правом углу перед изменением вкладки

Question

Я создаю веб-страницу с фиксированным заголовком в самом верху. В настоящее время я могу перейти на две страницы: Дом и О .

Простой рисунок веб-страницы:

Обе страницы могут быть довольно высокими, поэтому я пытаюсь сохранить для них положение прокрутки, чтобы при переключении пользователя с одного на другое он оказался там, где он был в прошлый раз. Проблема заключается в том, что когда я переключаюсь из «О» в «Домой» (или наоборот), текущая страница, за несколько секунд до переключения, прокручивается вверх, и только тогда появляется новая страница. Прокрутка очень быстрая и в результате вызывает странный эффект мерцания (но кажется, что она не полностью прокручивает страницу вверх)

Проблема возникает в Safari (я не вижу, чтобы это происходило в Chrome, и я не проверял это в Opera или IE / Firefox).

Как я это делаю:

В NavigationList (который является фиксированным заголовком) я сохраняю позицию прокрутки текущей страницы непосредственно перед переключением на новую страницу. Поэтому, когда я нажимаю Home или About , этот код вызывается:

history.push(clickedItem.pushDirectory);
localStorage.setItem(item.title, window.scrollY);

, а затем в Home и О компонентах. Положение прокрутки восстанавливаю следующим образом:

  componentDidMount() {
    const scrollPosition = localStorage.getItem("ABOUT") || 0; //or "HOME" depending on the component
    window.scrollTo(0, scrollPosition);
  }

И это мой код для обработки переключения маршрута. В настоящее время я добавил анимацию исчезновения, но даже без этой анимации возникает ошибка.

  <Route
    render={({ location }) => (
      <div className="contentContainer">
        <TransitionGroup>
          <CSSTransition
            key={location.key}
            classNames="fadeAnimation"
            timeout={{ enter: 300, exit: 300 }}
          >
            <Switch location={location}>
              <Route exact path="/" component={HomePage} />
              <Route exact path="/about" component={AboutPage} />
            </Switch>
          </CSSTransition>
        </TransitionGroup>
      </div>
    )}
  />

Может кто-нибудь сказать мне, как отключить эту прокрутку прямо перед изменением страницы, или подсказать лучший способ сохранить положение прокрутки компонента.