Dynamic transitions with react-router and react-transition-group
Let’s describe the problem first, we’ll discuss about the solution with some example code to cover it in this article. React-router and react-transition-group are two widely used libraries that can be combined to create transitions between routes. However, in react-transition-group, once a component is mounted, its exit animation is specified, not changeable. Thus, dealing with transitions depending of the next state (what we call dynamic transitions) is challenging with this library. The exiting transition of state A does not depend only from state A (“dynamic transition”) it is not easy to tweak it to create more sophisticated use cases such as dynamic transitions. In this article, we’ll explain how to do so thanks to react-router v4 and react-transition-group v2. 1. Understanding the simple example If you are on your way developing transitions between pages of your react app, you might have already met this code snippet. (adapted with state A/B): ...