next.js: Link with hash doesn't seem to work in next13
Verify canary release
- 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
To Reproduce
click/hover over Link To Footer to see the link has undefined in it
Screenshot
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 3
- Comments: 16 (1 by maintainers)
Commits related to this issue
- App Router: fix relative query/hash handling in `next/link` and router push/replace (#49521) ## Problem Relative hash/query handling in `next/link` (e.g. `<Link href="#hello">`) is broken in App Ro... — committed to vercel/next.js by keyz a year ago
- App Router: fix relative query/hash handling in `next/link` and router push/replace (#49521) ## Problem Relative hash/query handling in `next/link` (e.g. `<Link href="#hello">`) is broken in App Ro... — committed to hydRAnger/next.js by keyz a year ago
Next 13.4.2, still issues with
#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#hashafter:~/#hash