React Queue Router

Usage

Installation

$ npm install react-queue-router

Create a simple routing

Let's assume you have 3 pages (Top, About and 404) on your web site.

App.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {QueueRouter, Switch, Route} from 'react-queue-router'

import Top from './Top'
import About from './About'
import NotFound from './NotFound'

const App = () => {
  return (
    <QueueRouter>
      <Switch>
        <Route path='/' component={Top}/>
        <Route path='/about' component={About}/>
        <Route component={NotFound}/>
      </Switch>
    </QueueRouter>
  )
 }
 
ReactDOM.render(<App/>, document.getElementById('root'))
Top.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'

const Top = () => {
  useTransition()
  
  return <h1>Hello, React Queue Router!</h1>
}

export default Top
About.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'

const About = () => {
  useTransition()
  
  return <h1>Hello, About page!</h1>
}

export default About
NotFound.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'

const NotFound = () => {
  useTransition()
  
  return <h1>404 Page Not Found</h1>
}

export default NotFound

This is all enough to give routing in the app.

Add transition animation

If you want to give animations, for example, to the Top page, you add animation.js and tweak Top.jsx like below.

animation.js
export const enterAnimation = ({release}) => {
  // Do your fancy animation here.
  // When everything is done, call "release".
  release()
}

export const leaveAnimation = ({release}) => {
  // Do your fancy animation here.
  // When everything is done, call "release".
  release()
}
Top.jsx
import React from 'react'
import {useTransition} from 'react-queue-router'
import {enterAnimation, leaveAnimation} from './animation' // added

const Top = () => {
  useTransition(enterAnimation, leaveAnimation) // modified
  
  return <h1>Hello, React Queue Router!</h1>
}

export default Top

The hook useTransition takes functions for leaving and entering as its argument.

In both animation functions, release needs to be called after all animations are done.

Add link

Then, add Nav.jsx. You can use Link component.

Nav.jsx
import React from 'react'
import {Link} from 'react-queue-router'

const Nav = () => {  
  return (
    <nav>
      <Link to='/'>Top</Link>
      <Link to='/about'>About</Link>
    </nav>
  )
}

export default Nav

Import it in App.jsx.

App.jsx
import React from 'react'
import ReactDOM from 'react-dom'
import {QueueRouter, Switch, Route} from 'react-queue-router'

import Top from './Top'
import About from './About'
import NotFound from './NotFound'
import Nav from './Nav' // added

const App = () => {
  return (
    <QueueRouter>
      <Nav/> {/* added */}
      <Switch>
        <Route path='/' component={Top}/>
        <Route path='/about' component={About}/>
        <Route component={NotFound}/>
      </Switch>
    </QueueRouter>
  )
 }
 
ReactDOM.render(<App/>, document.getElementById('root'))

For more details, see API section.