Accepted answer

Yes, you're doing it the right way. Just be sure to specify a unique key attribute on the <RouteHandler/> component. The route name is generally a good option.


With the introduction of React Router v4, this has got a lot easier. We can now transition within RRv4 using HOC.

I have a vid and code over at github/youtube.

I hope this is useful to you. @gpltaylor


To anyone coming to this later, there is now documentation for animation on the React github documentation under the Add Ons/Animation section.

The code in the original question is almost identical to that in the documentation, with the exception that the example from the documentation (below) also includes transition timeouts, which is recommended.

    <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>

For info the transitionEnterTimeout and transitionLeaveTimeout properties arrived in React 0.14, there's a small amount more about them in the 0.14 Release Notes:

Add-Ons: To improve reliability, 'CSSTransitionGroup' will no longer listen to transition events. Instead, you should specify transition durations manually using props such as 'transitionEnterTimeout={500}'.

Related Query

More Query from same tag