Member-only story
React. How to animate transitions between React Router routes
Learn how to create animations when navigating between routes using React Router
In this article I want to talk to you about how we can animate the transitions between the routes of our application when we work with React Router, one of the main libraries that we have within the React ecosystem to define a routing system.
The idea will be to use the React Transition Group library in order to define these animations (which we will create using basic CSS) which will help us to get acquainted with its basic concepts while also delving into some very interesting React Router features.
So, without entertaining ourselves, let’s do it!
Basic animation with React Transition Group
If you have never worked with this library I think that the most interesting thing to internalize its operation will be to see a simple example. To do this, I will start from a previous article in which I explained how we can use the React Portals API to create a modal window in our application.
In this article I created a repository with the final code that will be the one we will use as a starting point to add an animation to the modal window when it is displayed.
So first we will install the React Transition Group library:
yarn add react-transition-groupIf you have seen, the code responsible for creating the portal associated with our modality is as follows:
