Next-routes: Problem with router event handlers

Created on 25 Oct 2017 · 3Comments · Source: fridays/next-routes

By using this router, handlers like onRouteChangeStart will not work.

Source

arefaslani

Most helpful comment

@nickyhajal Sorry but I don't remember what was my problem. But this is a simple component that uses routes events that may help:

import React from "react";
import Head from "next/head";
import NProgress from "nprogress";
import { Router } from "routes";

NProgress.configure({ showSpinner: false });


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

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

export default () => (
  <div style={{ marginBottom: 20 }}>
    <Head>
      {/* Import CSS for nprogress */}
      <link rel="stylesheet" type="text/css" href="/static/css/nprogress.css" />
    </Head>
  </div>
);

arefaslani on 31 Mar 2018

👍3 👎1

All 3 comments

Pardon me, That was just a mistake.

arefaslani on 25 Oct 2017

Sorry to bring this up again - but what was your mistake? next/router events aren't firing for me at the moment so perhaps I'm doing the same thing?

Thanks!

nickyhajal on 31 Mar 2018

@nickyhajal Sorry but I don't remember what was my problem. But this is a simple component that uses routes events that may help:

import React from "react";
import Head from "next/head";
import NProgress from "nprogress";
import { Router } from "routes";

NProgress.configure({ showSpinner: false });


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

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

export default () => (
  <div style={{ marginBottom: 20 }}>
    <Head>
      {/* Import CSS for nprogress */}
      <link rel="stylesheet" type="text/css" href="/static/css/nprogress.css" />
    </Head>
  </div>
);

arefaslani on 31 Mar 2018

👍3 👎1

Was this page helpful?

0 / 5 - 0 ratings