Link with hash doesn't seem to work in next13

[shanejonas]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:23 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T6000
Binaries:
  Node: 14.17.5
  npm: 6.14.14
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Brave 106.0.5249.119

How are you deploying your application? (if relevant)

next dev

Describe the Bug

Linking with hash doesn't seem to work in next13

<Link href="#footer">
 Link To Footer
</Link>

becomes http://localhost:3000/undefined#footer

Expected Behavior

link should be to current page header but instead becomes http://localhost:3000/undefined#footer

Link to reproduction

https://codesandbox.io/p/github/shanejonas/nextjs-link-undefined-bug/draft/great-lake?file=%2Fapp%2Fpage.tsx

To Reproduce

click/hover over Link To Footer to see the link has undefined in it

Screenshot

[1377sayaba]

This is also happened for me So i downgraded to version 12.3

[cachho]

I don't want to hijack your thread, but I found another issues with hashes in links.

<a href="#CCM.openWidget" title="Cookie consent configuration"> (ccm19 script) doesn't do anything in next13, when I use the same snippet in create-react-app, vue and wordpress. (I didn't want to open a thread for now, in case it might be a 3rd party issue)

Update: this is working now.

[mikeschneiderdotme]

I also have run into this issue, next/link is not appending the hash to the url and instead is routing to the hash address. <Link href='#hash'>Link</Link> before I upgraded to Next13: ~/currentRoute#hash after: ~/#hash

[returnvoid]

Adding shallow={true} worked for me:

Go there

[jayantasamaddar]

Adding shallow={true} worked for me: Go there

Does not work in Next 13.2.3

[khan-ajamal]

Anyone figured it out yet. I am stilling facing this issue in [email protected]

[bhavesh-chaudhari]

I am facing this issue too with [email protected]

[drajamal]

For now, I am using the raw HTML a tag because my use case is just taking the user to a particular section on the same page.

[jmalexan]

Having this as well, [email protected]. Using tags at the moment to workaround.

[SaveliiLukash]

Next 13.4.2, still issues with #

[fzsf163]

"next": "13.4.3" I don't know if this solves the problem , but writting it like this works. May be.

<Link href='/#sectionID'><Link/>

Does anyone know how to get this '#id' part from the url ? I want to show active section. This is why I need to get this. I am pretty new at this.

[stephen-spar]

Sorry if this isn't the right place, but I'm seeing the following issue using next: 13.4.1 on the app router w/ hashes:

• be on the root route (i.e. /)
• click on a <Link> with an href to a specific section on that page (ex. <Link href='#contact'>
  • this correctly jumps down to the element with id=contact
• scroll somewhere else on the page & click on a Link with href='/'
• the page automatically scrolls down to the element with id=contact
• if you navigate to a different page and then navigate back to the root route using a Link with href='/' (i.e. without the #contact) without refreshing in between, it will also automatically scroll down to the element with id='contact'

guessing this is some sort of uncleared state issue? My workaround currently is to add an id to the top element of my root route and have links go to href='/#top-element' so the scroll position isn't disrupted.

[Afrozefathima]

For me link with # works but general link not navigating

[Afrozefathima]

Like <Link href='/link'> is not working in next js 13.4.2

[fzsf163]

For me link with # works but general link not navigating

some code reference would help everyone to understand your problem better. If you are meaning this type of link-

<Link href="/about"></Link>

which takes you to about page. Then you need to put about folder inside app directory.

file structure should be like this

├───app
│   ├───about
│   ├───blog

the "/" indicates app route or folder then about directs to your about folder and page.js/tsx/jsx renders about page. You can switch /about with /blog to go to blog page.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.