Cacher is the code snippet organizer for pro developers

import React from 'react'
import { CSSTransitionGroup } from 'react-transition-group'
/* you'll need this CSS somewhere
.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}
*/
const Animate = () => (
 <CSSTransitionGroup
    transitionName="fade"
    transitionEnterTimeout={300}
    transitionLeaveTimeout={300}
  >
    {/* no different than other usage of
        CSSTransitionGroup, just make
        sure to pass `location` to `Route`
        so it can match the old location
        as it animates out
    */}
    <Route
      location={location}
      key={location.key}
      path="/:h/:s/:l"
      component={HSL}
    />
  </CSSTransitionGroup>
  );