Router events

Answered

Siberian posted this in #help-forum

SiberianOP

2024-03-07T20:56:54.000Z

Could you help me find Router.events.on('routeChangeStart', ()=>{}); for version 14? Does anyone know of any alternatives?

Answered by Siberian

Well, in the end my objective was to implement a progreess bar... i finally found a library called 'next-nprogress-bar'... but, i reaaly like to do it with router events like in previous versions
https://www.npmjs.com/package/next-nprogress-bar

View full answer

7 Replies

Gharial

2024-03-07T21:33:41.000Z

@Siberian So you're trying to do something on route change? Did you check the examples here? https://nextjs.org/docs/app/api-reference/functions/use-router

Giant panda

2024-03-07T21:44:31.000Z

I'm not sure that worked for me, try using useffect that runs when path changes from usePathname

Giant panda

2024-03-07T21:52:16.000Z

import { usePathname } from "next/navigation"

const pathname = usePathname();
  const [isOpen, setisOpen] = useState(false);

  // set isOpen to false when route changes
  useEffect(() => {
    setisOpen(false);
  }, [pathname]);

That's an example

Sloth bear

2024-03-09T16:11:40.000Z

I'm having an issue with this as well

I tried the useEffect + pathname but it didn't work because the pathname always appears as the original pathname to useEffect

here's my example:

  useEffect(() => {
    console.log(`pathname: ${pathname}`);
    if (!pathname.includes('/mypath')) {
      dispatch({ type: ContextActionType.RESET_CONTEXT });
    }

    return () => {
      console.log(`returned pathname: ${pathname}`);
    };
  }, [pathname]);

pathname always prints 'mypath' in the above example

SiberianOP

2024-04-03T21:32:12.000Z

Answer