React Router - Animated Transitions
In this article, I will show you how to do animated transitions using
react-transition-group libraries and the solution for the common mistake.
Here is the sample application with animated transitions below
In this sample application, I used
<CSSTransition> for animation.
From the docs,
<TransitionGroup> is a state machine for managing the mounting and unmounting of components over time.
In our case, whenever the route changes,
<CSSTransition> will apply transition animations. Let's review the code below
<CSSTransition> will prefix
-exit to the
classnames prop in runtime. We can use these class names to implement our animation effect as shown below
For more details about
<CSSTransition>, refer to the document here
One common issue is that during transition, both the new
<CSSTransition> and old
<CSSTransition> component are in the DOM. This issue occurs as
Switch component will have same
location prop during transition and hence, rendering both components.
To solve this issue, you need to get
react-router-dom and pass it manually to
Switch as shown below
And just like that, it works.