ReactTransitionGroup을 ReactRouter와 함께 사용하기

Question

나는 애니메이션을위한 ReactTransitionGroup (ReactTransitionGroup)을 React Router와 함께 사용하려고하므로 CSS와 달리 requestAnimationFrame을 사용하여 전환을 애니메이션으로 만들 수 있습니다. 누구든지 각 라이프 사이클과 관련된 구성 요소에서 특별한 라이프 사이클 후크를 호출하는 방법을 알고 있습니까?

ReactTransitionGroup 내에서 RouteHandler 구성 요소를 래핑하려고 시도했지만 경로를 변경할 때 현재 경로 구성 요소의 'componentWillLeave'이벤트가 실행되지 않습니다.

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

다음은 내 문제를 설명하는 JSFiddle입니다 : http://jsfiddle.net/d2mnwqLj/3/

Answer 1

확인을, 그래서 나는 GitHub의에 답을 발견했다.

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> 
    ); 
    } 
});