Next.js: router.push() with hash does not work properly

[Pikachews]

Bug report

Describe the bug

When using next/router's router.push() (and presumably other methods) with a hash parameter, the hash does not properly appear or the url ends up improperly interpolated (in the case of dynamic routes).

To Reproduce

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

1. Go to https://codesandbox.io/s/nextjs-router-push-with-hash-589dd
2. Click on Static page with hash (good) button
   
   
   
   • Notice URL changes with hash properly appended
   
   
3. Click on Dynamic page with hash (bad) button
   
   
   
   • Notice URL does _not_ have hash appended <-- bad!
   
   
4. Click on Dynamic page with hash (bad) button again
   
   
   
   • Notice URL is not properly interpolated with dynamic route params, although hash is added <-- bad!
   
   
5. Click on Dynamic page with hash (bad) link
   
   
   
   • Notice URL changes with hash properly appended (just to showcase works properly)
   
   

Expected behavior

The URL should have the hash properly appended the first time the dynamic page button is clicked, and the URL should stay properly interpolated with dynamic route params the second time the dynamic page button is clicked.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: Windows
• Browser (if applies) Chrome
• Version of Next.js: 10.0.0
• Version of Node.js: v10.21.0

Additional context

Add any other context about the problem here.

[jperasmus]

I'm experiencing a similar issue with hashes and dynamic routes. In my case, I have nested dynamic routes for /[category]/[article] and trying to route to just a category with a hash, ie. /some-category-slug#hash throws an error stating the following:

Error: The provided `as` value (/some-category-slug) is incompatible with the `href` value (/[category]/[article]). Read more: https://err.sh/vercel/next.js/incompatible-href-as

As you can see, it incorrectly tries to match the nested article route and not the top-level category route.

I am routing using the next/link Link component:

<Link
  href={{
    pathname: '/[category]',
    query: { category: 'some-category-slug' },
    hash: 'hash',
  }}
>
  <a>Link</a>
</Link>

or using a href string:

<Link href="some-category-slug#hash">
  <a>Link</a>
</Link>

More interestingly is that this only happens when running Next.js in dev-mode. In production-mode, (yarn build && yarn start) it works as expected.

It is the same for Next.js v9 and the new v10.

[cyphire]

I have just started working with next.js and with next/link.

I don't know if I'm having the problem or it is with the hashes not working.

<li className="nav-item">
  <Link scroll={false} href="/index#out">
    <a className="nav-link">Stories</a>
  </Link>
</li>

Should go to my index page and scroll down to the "out" in the id or name (have both).

The problem is that this is part of DefaultStyle.js which is invoked by

which is at the top of different pages. Is there really no simple answer after the last year or so for dealing with hashes? Is it not that important?