如何修复 React Router v4 页面过渡动画错误？

Question

I want to create a simple fade animation when switching between routes in React Router v4.

My approach is entirely based on this guy's tutorial , where he used react-transition-group 's TransitionGroup and CSSTransition to create the effect.

So far the fading effect works, but not fully.

Whenever I navigate to a new route, the same component appears twice. One above the other, with the bottom one fading away quickly.

How can I get around this?

So far, the only way I could make the double appearing bug disappear, is by setting each child component to position:fixed . However, since the length of each component is dynamic, the footer 's position gets screwed up. Sometimes causing the footer to overlap with the component above.

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;
} 

I am open to other approaches to make page transitions in ReactJS, so any help is really appreciated! Thanks.

Answer 1

I know its old but this is the solution:
You need to use

Switch location={location}

Hope it helps.

Answer 2

You can use the react-transition-group lib. Find doc and example code here . Note that using Switch is prohibited.
Regarding CSS and the footer's position being screwed up, the example also use a container position: relative and a page position: absolute . But I have successfully implemented react-transition-group using CSS grid.