2

I'm trying to use React's low level API for animations (i.e ReactTransitionGroup) with React Router so I can animate transitions using requestAnimationFrame as opposed to CSS. Does anyone know how to get the special lifecycle hooks to be called on the component associated with each route?

I've tried wrapping the RouteHandler component inside ReactTransitionGroup but the 'componentWillLeave' event of the current route's component doesn't fire when changing routes. 

<ReactTransitionGroup component="div">
   <RouteHandler key={name}/>
</ReactTransitionGroup>

Here's a JSFiddle that illustrates my problem: http://jsfiddle.net/d2mnwqLj/3/

jul
  • 1,054
  • 2
  • 11
  • 24
  • 1
    This seems like a known issue: https://github.com/rackt/react-router/issues/543 and https://github.com/rackt/react-router/issues/727 – Ciro Costa Jan 26 '15 at 22:25

1 Answers1

1

Ok, so I found the answer on github. This does the trick:

var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Component = React.createClass({
  mixins: [Router.State, RouteHandler],
  render: function() {
    var routeKey = this.getRoutes().reverse()[0].name;
    var routeHandler = this.getRouteHandler({ key: routeKey });
    return (
     <div>
      <ul>
        <li><Link to="view1">View1 link</Link></li>    
        <li><Link to="view2">View2 link</Link></li>    
      </ul>
      <ReactTransitionGroup component="div">
         {routeHandler}
      </ReactTransitionGroup>
     </div>
   );
   }
});
Christopher Scott
  • 2,383
  • 2
  • 25
  • 23
jul
  • 1,054
  • 2
  • 11
  • 24
  • The mixin is gone in latest release. Any other way to do this? – Owais Lone May 10 '15 at 19:47
  • Maybe try the wrapping approach used here: http://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component/ – jul May 10 '15 at 21:51
  • 1
    Otherwise wait for 1.0 I guess – jul May 10 '15 at 21:52
  • I'll wait for 1.0. I don't think wrapping will help my usecase as I need to propagate the props from parent to child and having the propagation code outside of the component doesn't feel right. – Owais Lone May 11 '15 at 07:01