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

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

how can we achieve the same thing with react hook?

I'm not sure, but it works

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

const FancyRoute = props => {

  React.useState(nprogress.start());

  React.useEffect(() => {
    nprogress.done();
    return () => nprogress.start();
  });

  return (
    <Route {...props} />
  );
};

export default FancyRoute;

It works! Thank you.

This way is perfect, but the problem now is that the progress bar is appearing after the page loaded and not when the user clicks the button. Is there a solution for this problem?

I'm have a new solution: make a "fake" life cycle with hooks. You can use this hooks for more of life cycle "issues".

file useLifeCycle.ts

import { useRef, useEffect, EffectCallback } from 'react';

export const useComponentWillMount = (func: () => any) => {
    const willMount = useRef(true);

    if (willMount.current) func();

    willMount.current = false;
};

export const useComponentDidMount = (func: EffectCallback) => useEffect(func, []);

file CustomRoute.tsx

const CustomRoute = (props: RouteProps) => {
    useComponentWillMount(() => {
        nprogress.start();
    });

    useComponentDidMount(() => {
        nprogress.done();
    });

    return <Route {...props} />;
};

export default CustomRoute;

nprogress.start() when is used on the body of a component's function is caused infinite progress when re-loading the same route, since useEffect doesn't trigger again because component is already mounted, with useMemo you can fix it :

import { useEffect, useMemo } from 'react';
import { Route } from 'react-router-dom';
import nprogress from 'nprogress';
import 'nprogress/nprogress.css';

const FancyRoute = (props) => {
  useMemo(() => {
    nprogress.start();
  }, []);

  useEffect(() => {
    nprogress.done();
  }, []);

  return <Route {...props} />;
};

export default FancyRoute;

When I wrote this, my exact attribute did not work

Did you find a solution ?

I can not see nprogress is previewed.

Note that gist it a lot of years old so it's probably not right anymore... El 10 de nov de 2022 2:08 -0600, fisher821 ***@***.***>, escribió:

…

@fisher821 commented on this gist. I can not see nprogress is previewed. — Reply to this email directly, view it on GitHub or unsubscribe. You are receiving this email because you authored a thread. Triage notifications on the go with GitHub Mobile for iOS or Android.