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

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.