UniversalRouter + NProgress

How to use NProgress with UniversalRouter

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/nprogress.css">
<script src="https://unpkg.com/[email protected]/nprogress.js"></script>
<script src="https://unpkg.com/universal-router@3/universal-router.js"></script>
<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<div id="app"></div>

Babel + JSX

// import React from 'react'
// import ReactDOM from 'react-dom'
// import UniversalRouter from 'universal-router'
// import NProgress from 'nprogress'

const Link = (props) =>
  <a href={props.to} onClick={navigate}>
    {props.children}
  </a>

const Nav = () =>
  <ul>
    <li><Link to="/">Home</Link> (no delay)</li>
    <li><Link to="/news">News</Link> (0.3s delay)</li>
    <li><Link to="/users">Users</Link> (1.5s delay)</li>
  </ul>

const router = new UniversalRouter([
  { path: '/', action() {
    return <div>
      <Nav />
      <p>Home</p>
    </div>
  } },
  { path: '/news', async action() {
    await new Promise(resolve => setTimeout(resolve, 300))
    return <div>
      <Nav />
      <p>News</p>
    </div>
  } },
  { path: '/users', async action() {
    await new Promise(resolve => setTimeout(resolve, 1500))
    return <div>
      <Nav />
      <p>Users</p>
    </div>
  } },
])

const container = document.getElementById('app')
async function render() {
  try {
    NProgress.start()
    const path = location.pathname
    const page = await router.resolve(path)
    if (path === location.pathname) {
      ReactDOM.render(page, container)
      NProgress.done()
    }
  } catch (error) {
    NProgress.done()
    throw error
  }
}

function navigate(event) {
  event.preventDefault()
  const anchor = event.currentTarget
  const state = null
  const title = anchor.textContent
  const url = anchor.pathname + anchor.search + anchor.hash
  history.pushState(state, title, url)
  render()
}

history.replaceState(null, '', '/')
render()