Navigating to hash does not trigger router change

Bug report

Describe the bug

I would like to navigate to a hash on the same page, and be able to react to that change from different components. More precisely what I want to achieve is to jump to a collapsible section and expand it automatically based on that the hash in the URL matches the id of that section.

When creating a NextLink with a hash, router of useRouter does not change/trigger

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

My link:

<NextLink href="#section">
  <a>Jump to section</a>
</NextLink>

My component where I expect the change:

//...
const router = useRouter()
return (
  <Collapsible expanded={router.asPath.endsWith("#section")}>
    Lorem ipsum
  </Collapsible>
)

Expected behavior

Navigating to a hash should trigger useRouter()

System information

• OS: Ubuntu 20.04
• Browser Chrome Dev
• Version of Next.js: 9.4.4
• Version of Node.js: 12.6.0

Additional context

Found this: https://github.com/vercel/next.js/issues/5161

It states the issue is resolved, but I cannot figure out how to achieve this behaviour.

[balazsorban44]

@tomdohnal you might be onto something, since this has been marked as a good first issue, you might be right. Would you open a PR with your suggestion? If you don’t have the time, I can try myself, if you want, and I can credit you for the idea in the PR. 🙂

[tomdohnal]

I looked into the issue and it seems to be caused by the fact that the notify method in packages/next/next-server/lib/router/router.ts is not being called for hash changes.

If I replace this

 if (!options._h && this.onlyAHashChange(as)) {
  this.asPath = as
  Router.events.emit('hashChangeStart', as)
  this.changeState(method, url, as, options)
  this.scrollToHash(as)
  Router.events.emit('hashChangeComplete', as)
  return resolve(true)
}

with this

 if (!options._h && this.onlyAHashChange(as)) {
  this.asPath = as
  Router.events.emit('hashChangeStart', as)
  this.changeState(method, url, as, options)
  this.scrollToHash(as)
  this.notify(this.components[this.route]) // <--- notify component
  Router.events.emit('hashChangeComplete', as)
  return resolve(true)
}

in the change method, it starts working.

I’m happy to send a PR fixing this. However, I suppose you’d like to have a test for this behaviour and I’m not sure about what the best way to test it is. Maybe create a new test fixture in the test/integration/client-navigation/pages/nav? Something like as-path-hash and a test function in test/integration/client-navigation/test/index.test.js?