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

// $ExpectError
InvalidNumLink;

// $ExpectError
 {}}>Prefetch;

// $ExpectError
Router.onRouteChangeStart = {};

Router.onRouteChangeStart = (url: string) => {};
Router.onRouteChangeStart = null;

Router.onRouteChangeComplete = (url: string) => {};
Router.onRouteChangeComplete = null;

Router.onRouteChangeError = (err, url) => {
  if (err.cancelled) {
    console.log(`Route to ${url} was cancelled!`)
  }
}

Router.push('/about');
Router.push('/about', '/');
Router.replace('/about');
Router.replace('/about', '/');

const r: string = Router.route;
const p: string = Router.pathname;
const q: {} = Router.query;

export default class TestDocument extends Document {
  static async getInitialProps (ctx: Context) {

import UserProvider from '../components/UserProvider';
import StripeProviderSSR from '../components/StripeProvider';
import withData from '../lib/withData';

import theme from '../lib/theme';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; // eslint-disable-line node/no-unpublished-import
import '../node_modules/nprogress/nprogress.css'; // eslint-disable-line node/no-unpublished-import
import '../static/styles/app.css';

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

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

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

import { getGoogleMapsScriptUrl, loadGoogleMaps } from '../lib/google-maps';
import { getEnvVar } from '../lib/utils';

Sentry.init({
  dsn: getEnvVar('SENTRY_DSN'),
  environment: process.env.NODE_ENV,
});

// Use JSDOM on server-side so that react-intl can render rich messages
// See https://github.com/formatjs/react-intl/blob/c736c2e6c6096b1d5ad1fb6be85fa374891d0a6c/docs/Getting-Started.md#domparser
if (!process.browser) {
  global.DOMParser = new (require('jsdom').JSDOM)().window.DOMParser;
}

class OpenCollectiveFrontendApp extends App {

// @flow
import React from "react";
import Head from "next/head";
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();

type ActiveType = "view" | "discover";

import { theme } from "../theme";

class CommuterMenu extends React.Component<*> {
  props: {
    active: ActiveType,
    discoveryEnabled: boolean
  };

  static defaultProps = {
    active: "view",
    discoveryEnabled: true
  };

import NProgress from 'nprogress';
import Nav from './Nav';
import { StyledHeader, Logo } from './styles/HeaderStyles';
import Cart from './Cart';
import Search from './Search';

// nprogress is the loader bar at the top of the pane
// for styling see `../../static/nprogress.css`

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

const Header = () => (
  
    {/* nprogress bar */}
    <div>
      
        
          <a>Sick Fits</a>
        
      
      <nav>
    </nav></div>
    <div>
      </div>

if (typeof window !== 'undefined') {
  console.log(
    'Hey explorer! You can play around with Popmotion right from your console, by using window.popmotion.'
  );
  window.popmotion = popmotion;
}

Router.onRouteChangeStart = () => NProgress.start();
Router.onRouteChangeComplete = () => {
  if (typeof window !== 'undefined' && typeof window.Prism !== 'undefined') {
    window.Prism.highlightAll();
  }
  NProgress.done();
};
Router.onRouteChangeError = () => NProgress.done();

const Global = createGlobalStyle`
  ${reset}
  ${nprogressStyles}
`;

export default ({ children, title, theme, description, image }) => (

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 Header = () => (
	<nav>
);

export default Header;
</nav>

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>
    
      
      
      
      
      
      
      
      
      <title>{`vx | ${title}`}</title></div>

import NProgress from 'nprogress';
import Search from './Search.js';
import Menu from './Menu.js';
import Nav from './Nav.js';
import Cart from '../Cart';
import StyledHeader from '../styles/HeaderStyles.js';
import { Query } from 'react-apollo';
import { CURRENT_USER_QUERY } from '../../graphql';

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


class Header extends Component {
  state = { acctDrpdwn: false };
  toggAcctDrpdwn = e => {
    if (!!e && e.preventDefault) e.preventDefault();

    this.setState(state => ({ acctDrpdwn: !state.acctDrpdwn }));
  };
  render() {
    return (
      
        {({ data, error }) => (

progress(){
        //进度条
        Router.onRouteChangeStart = (url) => NProgress.start()
        Router.onRouteChangeComplete = () =>  {
            this.props.hideDispatch();
            NProgress.done();
        }
        Router.onRouteChangeError = () => NProgress.done()
    }

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;

    if (req) {
      pageProps.loggedInUser = get(req, 'session.passport.user');
    } else if (typeof window !== 'undefined') {