How to use the next/router.onRouteChangeStart function in next

import React from 'react';
import PropTypes from 'prop-types';
import Router from 'next/router';
import Head from 'next/head';
import NProgress from 'nprogress';

// for hot reload purpose
// also allow webpack to extract it
import 'assets/styles/main.scss';
import favIcon from 'assets/images/favicon.png';

import Header from './Header';
import Footer from './Footer';

// progress bar
Router.onRouteChangeStart = () => {
  NProgress.start();
};
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();

const Layout = props => (
  <div>
    
      
    
    <header>
    <div>{props.children}</div>
    <footer>
  </footer></header></div>
);

import React from 'react'
import Router from 'next/router'
import NProgress from 'nprogress'
import SnackBar from '../components/Snackbar'
import { initGA, logEvent, logPageView } from '../lib/analytics'

Router.onRouteChangeStart = () => {
  console.log('started listening')
  NProgress.start()
}
Router.onRouteChangeComplete = url => {
  logEvent('Navigation', `Navigated to ${url}`)
  NProgress.done()
}
Router.onRouteChangeError = () => {
  NProgress.done()
}

export default Page => {
  return class ContainerPage extends React.Component {
    static async getInitialProps (ctx) {
      try {
        let initialProps = {}

if (tape) {
      tape.sets.map(set =>
        set.tracks.map(track => {
          if (track.slug === songSlug) {
            activeTrack = track;
          }
        })
      );
    }
  }

  return { app, playback, url: req ? req.url : null, isMobile, artists, serverRenderedMP3: activeTrack ? activeTrack.mp3_url : null, serverRenderedSongTitle: activeTrack ? activeTrack.title : null };
};

Router.onRouteChangeStart = async (url) => {
  if (typeof window !== 'undefined' && window.UPDATED_TRACK_VIA_GAPLESS) {
    window.UPDATED_TRACK_VIA_GAPLESS = false;
    return 'nonsense';
  }
  const [nextDispatches = [], afterDispatches = []] = handleRouteChange(window.store, url);

  await Promise.all(nextDispatches);
  await Promise.all(afterDispatches.map(f => f()));
};

if (typeof window !== 'undefined') {
  setTimeout(async () => {
    const { currentTime, duration } = localStorage;
    const cachedUrl = window.location.pathname + window.location.search;
    const [artistSlug, ,,, songSlug] = window.location.pathname.replace(/^\//, '').split('/');

import React, { Children } from 'react';
import Head from 'next/head';
import NProgress from 'nprogress';
import Router from 'next/router';


Router.onRouteChangeStart = (url) => {
  console.log(`Loading: ${url}`);
  NProgress.start();
};
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();


function Page(props) {
  return (
    <section>
      
        <title>
          {props.name} - {props.title}
        </title>
        
        </section>

import App from 'next/app';
import Head from 'next/head';
import React, { Fragment } from 'react';
import Router from 'next/router';
import NProgress from 'nprogress';
import { get } from 'lodash';

import '../static/fonts/inter-ui/inter-ui.css';
import '../static/css/main.css';
import '../static/css/nprogress.css';

Router.onRouteChangeStart = () => NProgress.start();

Router.onRouteChangeComplete = () => NProgress.done();

Router.onRouteChangeError = () => NProgress.done();

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    const { asPath, req, res } = ctx;

    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    pageProps.pathname = asPath;

import React from 'react';
import Head from 'next/head';
import Router from 'next/router';
import NProgress from 'nprogress';
import ReactGA from 'react-ga';

if (typeof window !== 'undefined' && window.location.hostname !== 'localhost') {
  ReactGA.initialize('UA-96843800-1');
  ReactGA.set({ page: window.location.pathname });
  ReactGA.pageview(window.location.pathname);
}

Router.onRouteChangeStart = () => NProgress.start();
Router.onRouteChangeComplete = () => {
  NProgress.done();
  if (typeof window !== 'undefined' && window.location.hostname !== 'localhost') {
    ReactGA.set({ page: window.location.pathname });
    ReactGA.pageview(window.location.pathname);
  }
};
Router.onRouteChangeError = () => NProgress.done();

export default ({ title = 'visualization components' }) => (
  <div>
    
      
      
      
      </div>

import Head from 'next/head'
import Router from 'next/router'
import NProgress from 'nprogress'
import { LocaleProvider } from 'antd-mobile'
import enUS from 'antd-mobile/lib/locale-provider/en_US'
import 'isomorphic-fetch'
import pkg from '../../package.json'

Router.onRouteChangeStart = () => NProgress.start()
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()

export default ({ children }) => (
  <div>
    
      
      <title>Gank</title>
      
      
      
      
    
    
      {children}
    </div>

import Link from 'next/link';
import Router from 'next/router';
import NProgress from 'nprogress';
import Toolbar from 'material-ui/Toolbar';
import Grid from 'material-ui/Grid';
import Avatar from 'material-ui/Avatar';

import { styleToolbar } from './SharedStyles';

Router.onRouteChangeStart = () => {
  NProgress.start();
};
Router.onRouteChangeComplete = () => NProgress.done();
Router.onRouteChangeError = () => NProgress.done();

function Header() {
  return (
    <div>
      
        
          
            
              <a>
                </a></div>

import Head from 'next/head'
import NProgress from 'nprogress'
import Router from 'next/router'

Router.onRouteChangeStart = () => NProgress.start()
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()

export default () => (
  <div>
		
			
			
			
			
		
		<style>{`
			* {
				margin: 0;
				padding: 0;
				text-rendering: geometricPrecision;</style></div>

componentDidMount() {
    Router.onRouteChangeStart = url => {
      this.setState({
        isLoading: true
      });
    };

    Router.onRouteChangeComplete = () => this.setState({ isLoading: false });
    Router.onRouteChangeError = () => this.setState({ isLoading: false });
  }