Как исправить ошибку анимации перехода страницы в React Router v4?

Question

Я хочу создать простую анимацию затухания при переключении между маршрутами в React Router v4.

Мой подход полностью основан на уроке этого парня , где он использовал react-transition-group * TransitionGroup и CSSTransition для создания эффекта.

Пока чтоэффект затухания работает, но не полностью.

При каждом переходе к новому маршруту один и тот же компонент появляется дважды.Один над другим, нижний быстро исчезает.

Как я могу обойти это?

Пока что единственный способ, с помощью которого я могу устранить двойную ошибку - это установить для каждого дочернего компонента значение position:fixed.Однако, поскольку длина каждого компонента является динамической, позиция footer запутывается.Иногда нижний колонтитул перекрывается с вышеуказанным компонентом.

App.js

import React, { Component } from "react";
import { Switch, Route } from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";

// Sass styling
import "./sass/main.scss";

// Website components
import Navbar from "./components/navbar/Navbar";
import Homepage from "./components/mainContent/homepage/Homepage";
import Menu from "./components/mainContent/menu/Menu";
import HowTo from "./components/mainContent/howto/HowTo";
import ContactUs from "./components/mainContent/contactus/ContactUs";
import Footer from "./components/footer/Footer";
import Error from "./components/Error";

// Website parent component
class App extends Component {
  render() {
    return (
      <>
        <Navbar />
        <Route
          render={({ location }) => (
            <TransitionGroup>
              {/* React router transitions */}
              <CSSTransition key={location.key} timeout={300} classNames="fade">
                <Switch>
                  {/* Website routes with specified url endings */}
                  <Route path="/" component={Homepage} exact />
                  <Route path="/menu" component={Menu} exact />
                  <Route path="/how-to" component={HowTo} exact />
                  <Route path="/contact-us" component={ContactUs} exact />
                  {/* Route 404 not found */}
                  <Route component={Error} />
                </Switch>
              </CSSTransition>
            </TransitionGroup>
          )}
        />
        <Footer />
      </>
    );
  }
}

export default App;

style.css

// React router transitions
.fade-appear,
.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-appear-active,
.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 300ms linear;
}

.fade-exit {
  opacity: 1;
}

.fade-exit.fade-exit-active {
  opacity: 0;
  transition: opacity 300ms linear;
} 

Я открыт для других подходов к переходу страниц в ReactJS, поэтому любая помощь действительно приветствуется!Спасибо.