Feature

1. React-router-like routing

Since many developers use React Router for routing of react applications, React Queue Router follows the basic interface of it, such as <Switch/>, <Route/> and <Link/>.

If you have an experience on React Router, you will get how to use it in a moment.

2. Transition animation without any constraints

You are literary free from what kind of animation you implement.

  • Wanna different animation between Top page and About page? Fine.
  • And these animations have different time duration? No Problem.
  • Haven't decided whether just adding classes to fire animation or using JS animation library like TweenMax? Both work.

3. Transition control by the "queue"

As the name of the package shows, multiple transition plans cab be queued in the "history store" and will be released one by one. ("History store" is just an array that contains the string of URL path.)

You are responsible to let the "history store" know that the transition has end and it should "shift" the latest path to make the next one the latest, which in tern will trigger the next transition reactively.

Specifically, it has the cycle below.

"History push" is called when the url is changed. The path that the user is going to move is stored in the "history store".

"Dispatch" triggers the page transition. If "history store" has no path, it does nothing.

"Leave end" is the phase when current page's leaving is done. Then, current page's component will be unmounted and next page's component will be mounted.

"Enter end" is the phase when next page's entering is done. In this phase, the latest path in "history store" is deleted and then "dispatch" will be called.