Introduction

The problem

When you develop a web app with React and implement url based routing, probably you use React Router, which is well designed and very easy to use.

But when you try to add some animation to the transition from one route to another, you will figure out that React Router doesn't do the job.

Well, "entering" animation is implementable. (just do something when component is mounted.) But "leaving" ones are not because components bound to the path are unmounted immediately when the url is changed.

One solution is to use something like React Transition Group. This package enables you to add some animation when components are switched by React Router.

However, I would say there are still two problems below.

  1. It's difficult to give unique animations to page to page.
  2. The animation will easily be erroneous when user hit another link before the ongoing transition animation ends.

The solution

React Queue Router is the solution to the problems above.

With this package,

  • You can give different animations to page to page as you like.
  • With the interface through that you manually control the end of transition animation, you no longer have to worry about the crash of animation.

See the core ideas in Feature page.