Queue page transitions in React Router

Question

I have a web project, based on React, where I'm using React Router 4 to handle my routing. I've been doing some baby steps with React Router together with "react-transition-group", adding a fade transition based on CSSTransition component's classes, ie fade-enter, fade-enter-active etc...

Anyhow - this works all good and everything, but if I click the browser buttons back and forth quickly to change route, then the transitions get interrupted and will be more jumping into the "new state of transition".

Is there a way to queue the changed route so that if the user change to a different route while a transition is already in progress, then wait for the first transition to complete, and then handle the "new route". I don't want the location/url to be stopped or anything just the transition to work more smooth..?

Thanks

Answer 1

I made a library to solve this problem.

npm: react-queue-router
document: https://tokky0425.github.io/react-queue-router/

This is probably what you want.
(If something does not work well, please post an issue on github.)

Basically, the problem here is that you cannot cancel or stop (like e.preventDecault) the change of location.pathname when the user clicks the browser buttons back and forth.
One solution is to implement a routing not based on location.pathname but based on other value you stored somewhere manually.

In the case of the library I mentioned above, the history of location.pathname will be queued in an array, and component's mount will be executed one after another based on the value of the array
This makes it possible to wait for the end of the transition animation.
(Because the change of location.pathname just means that the pathname will be queued in the array.)

It seems it's difficult for React Router to do the job as long as it's routing is implemented based on location.pathname.