React. How to animate transitions between React Router routes

Learn how to create animations when navigating between routes using React Router

Gerardo Fernández
8 min readJan 20, 2020

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.

--

--

Gerardo Fernández

Entre paseo y paseo con Simba desarrollo en Symfony y React