React page transitions - CSS Transition - react-transition-group v1, react router v4

app.js

import React from 'react';
import { Route } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";

import TransitionedPage from './transitionedPage';

const HomePage = () => <div>Home</div>
const ContactPage = () => <div>Contact</div>

const App = () => {
  return (
    <div className="App">

      <TransitionGroup>
        <Route path="/" exact component={TransitionedPage(HomePage)}/>
        <Route path="/contact" exact component={TransitionedPage(ContactPage)}/>
      </TransitionGroup>

    </div>
  )
};

gistfile1.txt

import React from 'react';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

import './style.css';

const TransitionedPage = WrappedComponent =>
  class TransitionedPage extends React.Component {
    render() {
      return (
        <CSSTransitionGroup
          transitionName="example"
          transitionAppear={true}
          transitionAppearTimeout={500}
          transitionEnter={false}
          transitionLeave={false}>
          <WrappedComponent {...this.props} />
        </CSSTransitionGroup>
      );
    }
};

export default TransitionedPage;

gistfile2.txt

.example-appear {
  opacity: 0.01;
}

.example-appear.example-appear-active {
  opacity: 1;
  transition: opacity .5s ease-in;
}