next.js icon indicating copy to clipboard operation
next.js copied to clipboard

<Link> with href="#" always navigates to home

Open Fredkiss3 opened this issue 3 years ago • 0 comments

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 /#anchor while <a href='#anchor'> navigates to /something#anchor
  • <Link href="other-link"> navigates to /other-link while <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.

Fredkiss3 avatar Nov 18 '22 17:11 Fredkiss3