How to use nprogress in v6？

[hcweb]

I would like to use nprogress in v6. How can I implement it? Are there any beforeEach and afterEach methods similar to vue router? Thank you very much

[kiliman]

You can use the useNavigation and useFetchers hooks to know when navigation/requests are in progress. Then trigger NProgress.start()/done() accordingly. Add this to your top-level route component.

const navigation = useNavigation();
const fetchers = useFetchers();
useEffect(() => {
  const fetchersIdle = fetchers.every((f) => f.state === 'idle');
  if (navigation.state === 'idle' && fetchersIdle) {
    NProgress.done();
  } else {
    NProgress.start();
  }
}, [navigation.state, fetchers]);

[lukelew]

Thanks man, very useful answer. But I got a weird situation. The state of my navigation is always 'idle'. Don't know why it happens. BTW, I'm using createBrowserRouter to generate the router and passing it to RouterProvier to create routes in my app.

[ecesar88]

That is also happening to me. The navigation state is always "idle". Also using createBrowserRouter

[esotericbug]

This was happening to me also, before I switched to genrouted. But as per my investigation with this issue, this happens if you are using the hooks outside the react-router context.

[lukelew]

@ecesar88 @esotericbug I figured it out later but forgot to update here. You have to set a loader for the route, following is an example from the offcial site of React Router.

{
    element: <Team />,
    path: ":teamId",
    loader: async ({ params }) => {
      return fetch(`/api/teams/${params.teamId}.json`);
    }
}