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
@zxs-1024
Copy link

thank you! I have solved the problem.

@mtr1990
Copy link

mtr1990 commented Jan 7, 2020

thank you!

@RJ-1998
Copy link

RJ-1998 commented Jan 8, 2020

Great Work! Thanks a lot.

@lucasousi
Copy link

OMG! Perfectly, perfectly. Works 100% with typescript.

@jacksontong
Copy link

how can we achieve the same thing with react hook?

@DarWiM
Copy link

DarWiM commented Aug 6, 2020

how can we achieve the same thing with react hook?

I'm not sure, but it works
UPD: bad example, do not use

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;

@zhonglimh
Copy link

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.

@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