nprogress with react-router in create-react-app

App.js

import React from 'react'
import { BrowserRouter as Router, Switch } from 'react-router-dom'
import routes from './routes'
import FancyRoute from './components/tools/FancyRoute'

const App = props =>
  <Router>
    <Switch>
      {routes.map((route, i) =>
        <FancyRoute key={i} {...route} />
      )}
    </Switch>
  </Router>

export default App

AxiosUseNprogress

import axios from 'axios'
import '../../node_modules/nprogress/nprogress.css'
import NProgress from 'nprogress'
import qs from 'qs'

const API = {
  ROOT: process.env.NODE_ENV === 'development' ? '/' : 'https://blog.iwaterlc.com'
}
axios.defaults.baseURL = API.ROOT
axios.interceptors.request.use(function (config) {
  if (config.method === 'post') {
    config.data = qs.stringify(config.data)
  }
  NProgress.start()
  return config
})

axios.interceptors.response.use(function (config) {
  NProgress.done()
  return config
})

FancyRoute.js

import React from 'react'
import { Route } from 'react-router-dom'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import './FancyRoute.css'

class FancyRoute extends React.Component {
  componentWillMount () {
    nprogress.start()
  }

  componentDidMount () {
    nprogress.done()
  }

  render () {
    return (
      <Route {...this.props} />
    )
  }
}

export default FancyRoute

FancyRoute.scss

$progress-color: #bada55;

#nprogress .bar {
  background: $progress-color;
}

#nprogress .peg {
  box-shadow: 0 0 10px $progress-color, 0 0 5px $progress-color;
}

#nprogress .spinner-icon {
  border-top-color: $progress-color;
  border-left-color: $progress-color;
}

routes.js

import Home from './views/Home'
import About from './views/About'
import Blog from './views/Blog'

const routes = [
  {
    title: 'Home',
    path: '/',
    exact: true,
    component: Home
  },
  {
    title: 'Blog',
    path: '/blog',
    component: Blog
  },
  {
    title: 'About',
    path: '/about',
    component: About
  }
]

export default routes