Description

RouterContext is a React context from that you can access the currentPath and nextPath.

It can be used only in descendant components of <QueRouter/>.

<Route/> component's mount is based on currentPath.

Basic Usage

import React, {useContext} from 'react'
import {RouterContext} from 'react-queue-router'

const SomePageComponent = () => {
  const {currentPath, nextPath} = useContext(RouterContext)
  
  return (
    <div>
      {/* some content */}
    </div>
  )
 }
 
export default SomePageComponent

Cycle of currentPath and nextPath

Assume that you are currently on Top page (<Top/>) and hit the link to About page (<About/>).

Then, currentPath and nextPath will be updated like this.

As you see above, when you hit the link, nextPath changes first.

The change of nextPath induces the leave animation of currently mounted component. And, of course, you call release to tell the router the end of the animation.

After the end of the leave animation, currentPath in turn will be updated immediately, which switches the mounted component.

When the new component is mounted, the enter animation will be fired. After release is called, the router will get ready for the next transition.