<Link> with href="#" always navigates to home
Verify canary release
- [X] I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System: Platform: linux Arch: x64 Version: Ubuntu 20.04.0 LTS Fri Nov 18 2022 18:02:30 GMT+0100 (heure normale d’Europe centrale) Binaries: Node: 16.14.2 npm: 7.17.0 Yarn: 1.22.19 pnpm: 7.13.6 Relevant packages: next: 13.0.4-canary.5 eslint-config-next: N/A react: 18.2.0 react-dom: 18.2.0
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
When a Link is set with href of # it always returns to home page wether we are on the homepage or not.
Expected Behavior
The link should navigate to the same page.
Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster
https://stackblitz.com/edit/vercel-next-js-fl8gkd?file=app%2Fpage.tsx,app%2Fother%2Fpage.tsx
To Reproduce
Go to the second page and click on the dummy link (its href is <Link href="#second">) you will be redirected to the homepage.
I think the problem is that the <Link> component needs the full path to the route to link correctly. the problem is that this behaviour is different from the native <a> element which link relatively.
For more comparison on how they are different :
when the page is on url /something :
-
<Link href="#">navigates to/#while<a href='#'>navigates to/something# -
<Link href="#anchor">navigates to/#anchorwhile<a href='#anchor'>navigates to/something#anchor -
<Link href="other-link">navigates to/other-linkwhile<a href="other-link">navigates to/something/other-link
This can be a problem when making documentations websites with table of contents as this would lead to undesired behavior.