Transition Motion React Router 4 Route Transition

FadeRoute.js

import React from 'react';
import {Route} from 'react-router-dom';
import PropTypes from 'prop-types';
import {TransitionMotion, spring} from 'react-motion';

const FadeRoute = ({component: Component, ...rest }) => {
  return (<Route {...rest} children={({location, match}) => (
    <TransitionMotion
      willEnter={() => ({opacity: 0})}
      willLeave={() => ({opacity: spring(0)})}
      styles={match ? [{
        key: location.pathname,
        style: {opacity: spring(1)},
        data: {match, location}
      }] : []}
    >
      {interpolatedStyles => (
        <div className="route">
          {interpolatedStyles.map(({key, style, data}) => (
            <div
              className="page"
              key={key}
              style={style}
            >
              <Component {...data} />
            </div>
          ))}
        </div>
      )}
    </TransitionMotion>
  )} />);
};

FadeRoute.propTypes = {
  component: PropTypes.node
};

export default FadeRoute;