React page transitions - Js Transition - react-transition-group v1, react router v4 (animate with JS)

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 firstChild = props => {
  const childrenArray = React.Children.toArray(props.children);
  return childrenArray[0] || null;
};

const TransitionedHomePage = TransitionedPage(HomePage);
const TransitionedContactPage = TransitionedPage(ContactPage);


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

      <Route
        exact
        path="/"
        children={({match, ...rest}) => (
          <TransitionGroup component={firstChild}>
            {match && <TransitionedHomePage/>}
          </TransitionGroup>
        )}
      />
      <Route
        exact
        path="/contact"
        children={({match, ...rest}) => (
          <TransitionGroup component={firstChild}>
            {match && <TransitionedContactPage/>}
          </TransitionGroup>
        )}
      />

    </div>
  )
};

gistfile1.txt

import React from 'react';

import './cssTransitionedPage.scss';

const JsTransitionedPage = WrappedComponent =>
  class JsTransitionedPage extends React.Component {
    componentDidMount() {
      console.log('TransitionedPage', 'componentDidMount');
    }
    componentWillAppear(cb) {
      console.log('TransitionedPage', 'componentWillAppear');
      cb();
    }
    componentWillEnter(cb) {
      setTimeout(
        () => console.log('TransitionedPage', 'componentWillEnter'),
        250
      );
      cb();
    }
    componentWillLeave(cb) {
      console.log('TransitionedPage', 'componentWillLeave');
      setTimeout(() => cb(), 175);
    }
    render() {
      return (
        <WrappedComponent {...this.props} />
      );
    }
};

export default JsTransitionedPage;