Fire onEffect on url change (App Router)

Question

i found a bunch of solutions like this for example:
https://stackoverflow.com/questions/67063251/listen-for-router-change-via-useeffect-in-nextjs

but they all seem to be for the pages router. i use the app router, and app router's useRouter doesn't have alot of the pages router's features.
any idea how to implement something like this? i have a header component in layout.tsx, i'd like to change a text inside it every time the url changes/user gets redirected

joulev · Answer

const pathname = usePathname()
useEffect(() => {
  // do stuff
}, [pathname]);

Fire onEffect on url change (App Router)

2 Replies