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

const reportView = () => {
    const { pathname } = window.location;

    fetch('https://sc-micro-analytics.now.sh' + pathname)
      .then(() => {
        console.log(`Reported page view for ${pathname}.`);
      })
      .catch(err => {
        console.warn('Could not report page view:', err);
      });
  };

  reportView();

  Router.onRouteChangeComplete = () => {
    reportView();
  };
}

import AppDrawer from 'docs/src/modules/components/AppDrawer';
import Notifications from 'docs/src/modules/components/Notifications';
import MarkdownLinks from 'docs/src/modules/components/MarkdownLinks';
import usePageTitle from 'docs/src/modules/components/usePageTitle';
import { LANGUAGES_LABEL } from 'docs/src/modules/constants';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';

const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' };
const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/';

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

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

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

const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
function DeferredAppSearch() {
  const fallback = null;

  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    setMounted(true);
  }, []);

import Link from 'next/link'
import NProgress from 'nprogress'
import Router from 'next/router'

Router.onRouteChangeStart = url => NProgress.start()
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()
  
export default ( { selected }) => {
    let {selectionFreshClass, selectionNewClass, selectionPopularClass, selectionBookmarksClass} = 'gray'
    
    switch(selected) {
        case 'fresh':
        selectionFreshClass = 'black b'
            break;
        case 'new':
        selectionNewClass = 'black b'
            break;
        case 'popular':
        selectionPopularClass = 'black b'
            break;
        case 'bookmarks':

import Link from 'next/link';
import styled from 'styled-components';
import Router from 'next/router';
import NProgress from 'nprogress';
import Nav from './Nav';

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

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

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

const Logo = styled.h1`
  font-size: 4rem;
  margin-left: 2rem;
  position: relative;
  z-index: 2;
  transform: skew(-7deg);
  a {
    padding: 0.5rem 1rem;
    background: ${props => props.theme.red};

import React from 'react';
import PropTypes from 'prop-types';
import { MuiThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import Router from 'next/router';
import NProgress from 'nprogress';

import getContext from './context';
import Header from '../components/Header';
import Notifier from '../components/Notifier';

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

function withLayout(BaseComponent) {
  class App extends React.Component {
    constructor(props) {
      super(props);
      const { pageContext } = this.props;
      this.pageContext = pageContext || getContext();
    }

    componentDidMount() {
      const jssStyles = document.querySelector('#jss-server-side');
      if (jssStyles && jssStyles.parentNode) {
        jssStyles.parentNode.removeChild(jssStyles);
      }
    }

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>

componentDidMount() {
    if (!localStorage.getItem('codeleak-cookies')) {
      GdprNotification()
    }

    Router.onRouteChangeComplete = url => {
      trackPageView(url)
    }
  }

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

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

componentDidMount() {
    this.trackPageview();
    Router.onRouteChangeComplete = url => this.trackPageview();
  }

import Link from 'next/link'
import Head from 'next/head'

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

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

const linkToProjects = ownerkey => {
  return {
    pathname: '/projects',
    query: { ownerkey }
  }
}
const linkToTestStatus = ownerkey => {
  return {
    pathname: '/test-status',
    query: { ownerkey }
  }
}

export default ({ children, title = '', ownerkey, showNav = true }) => (