Skip to content

Instantly share code, notes, and snippets.

@shelldandy
Created October 17, 2017 19:08
Show Gist options
  • Save shelldandy/02ad1a9f8b5b86d1b2e4dd26a11967b2 to your computer and use it in GitHub Desktop.
Save shelldandy/02ad1a9f8b5b86d1b2e4dd26a11967b2 to your computer and use it in GitHub Desktop.
nprogress with react-router in create-react-app
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
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
$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;
}
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
@AmmarMohamadIsmaeel
Copy link

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?

Copy link

ghost commented Oct 13, 2020

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;

@amiut
Copy link

amiut commented Jan 12, 2021

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;

@OmkarK45
Copy link

When I wrote this, my exact attribute did not work

Did you find a solution ?

@bolo821
Copy link

bolo821 commented Nov 10, 2022

I can not see nprogress is previewed.

@shelldandy
Copy link
Author

shelldandy commented Nov 10, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment