Link with hash doesn't seem to work in next13 #42157

shanejonas · 2022-10-29T19:41:17Z

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

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

The text was updated successfully, but these errors were encountered:

1377sayaba · 2022-10-29T19:53:35Z

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

cachho · 2022-11-06T20:14:48Z

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 · 2022-12-16T20:19:40Z

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 · 2023-02-03T23:20:10Z

Adding shallow={true} worked for me:

Go there

jayantasamaddar · 2023-03-06T05:19:36Z

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

Does not work in Next 13.2.3

khan-ajamal · 2023-04-09T06:44:25Z

Anyone figured it out yet. I am stilling facing this issue in next@13.3.0

bhavesh-chaudhari · 2023-04-11T05:57:39Z

I am facing this issue too with next@13.1.2

drajamal · 2023-04-11T10:20:18Z

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 · 2023-04-15T02:54:08Z

Having this as well, next@13.3. Using tags at the moment to workaround.

SaveliiLukash · 2023-05-16T11:58:57Z

Next 13.4.2, still issues with #

fzsf163 · 2023-05-23T19:09:00Z

"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 · 2023-05-23T21:26:00Z

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 · 2023-05-26T17:12:44Z

For me link with # works but general link not navigating

Afrozefathima · 2023-05-26T17:13:41Z

Like is not working in next js 13.4.2

fzsf163 · 2023-05-26T17:56:58Z

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.

…r push/replace (#49521) ## Problem Relative hash/query handling in `next/link` (e.g. `<Link href="#hello">`) is broken in App Router, especially if you're on a nested route. This wasn't a problem in `/pages` because the href always get fully resolved in `<NextLink>`; i.e. if you have `<Link href="#hash" />` on `/hello`, it'll resolve the href to `/hello#hash` and use that everywhere. However, in App Router, `<Link>` no longer uses the current location to resolve the href: https://github.com/vercel/next.js/blob/5451564f364399003b05939fa6dd7d32c1dabec7/packages/next/src/client/link.tsx#L450-L457 Therefore navigating with `new URL(href, location.origin)` will skip the current path and always apply the relative hash/query to the _root_ route: https://github.com/vercel/next.js/blob/5451564f364399003b05939fa6dd7d32c1dabec7/packages/next/src/client/components/app-router.tsx#L208-L215 ## Solution Not 100% sure if this is the best solution, but since `app-router` is already reading `window.location`, I'm using `location.href` as the base URL to resolve the href. I grep'd for `location.origin` and checked other callsites; seems like only `app-router` deals with user specified hrefs. Fixes #42157 & #44139, and potentially #48554 and #22838 ## Test Plan ``` pnpm testheadless test/e2e/app-dir/navigation ``` ---------

…r push/replace (vercel#49521) ## Problem Relative hash/query handling in `next/link` (e.g. `<Link href="#hello">`) is broken in App Router, especially if you're on a nested route. This wasn't a problem in `/pages` because the href always get fully resolved in `<NextLink>`; i.e. if you have `<Link href="#hash" />` on `/hello`, it'll resolve the href to `/hello#hash` and use that everywhere. However, in App Router, `<Link>` no longer uses the current location to resolve the href: https://github.com/vercel/next.js/blob/5451564f364399003b05939fa6dd7d32c1dabec7/packages/next/src/client/link.tsx#L450-L457 Therefore navigating with `new URL(href, location.origin)` will skip the current path and always apply the relative hash/query to the _root_ route: https://github.com/vercel/next.js/blob/5451564f364399003b05939fa6dd7d32c1dabec7/packages/next/src/client/components/app-router.tsx#L208-L215 ## Solution Not 100% sure if this is the best solution, but since `app-router` is already reading `window.location`, I'm using `location.href` as the base URL to resolve the href. I grep'd for `location.origin` and checked other callsites; seems like only `app-router` deals with user specified hrefs. Fixes vercel#42157 & vercel#44139, and potentially vercel#48554 and vercel#22838 ## Test Plan ``` pnpm testheadless test/e2e/app-dir/navigation ``` ---------

github-actions · 2023-06-28T00:04:15Z

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.

shanejonas added the bug Issue was opened via the bug report template. label Oct 29, 2022

keyz mentioned this issue May 9, 2023

App Router: fix relative query/hash handling in next/link and router push/replace #49521

Merged

decepulis mentioned this issue May 12, 2023

<Link> with href="#..." still navigates to home #49722

Closed

1 task

ijjk closed this as completed in #49521 May 28, 2023

github-actions bot locked as resolved and limited conversation to collaborators Jun 28, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Link with hash doesn't seem to work in next13 #42157

Link with hash doesn't seem to work in next13 #42157

shanejonas commented Oct 29, 2022 •

edited

Loading

1377sayaba commented Oct 29, 2022

cachho commented Nov 6, 2022 •

edited

Loading

mikeschneiderdotme commented Dec 16, 2022

returnvoid commented Feb 3, 2023

jayantasamaddar commented Mar 6, 2023

khan-ajamal commented Apr 9, 2023

bhavesh-chaudhari commented Apr 11, 2023

drajamal commented Apr 11, 2023

jmalexan commented Apr 15, 2023

SaveliiLukash commented May 16, 2023

fzsf163 commented May 23, 2023

stephen-spar commented May 23, 2023

Afrozefathima commented May 26, 2023

Afrozefathima commented May 26, 2023

fzsf163 commented May 26, 2023

github-actions bot commented Jun 28, 2023

Link with hash doesn't seem to work in next13 #42157

Link with hash doesn't seem to work in next13 #42157

Comments

shanejonas commented Oct 29, 2022 • edited Loading

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

Screenshot

1377sayaba commented Oct 29, 2022

cachho commented Nov 6, 2022 • edited Loading

mikeschneiderdotme commented Dec 16, 2022

returnvoid commented Feb 3, 2023

jayantasamaddar commented Mar 6, 2023

khan-ajamal commented Apr 9, 2023

bhavesh-chaudhari commented Apr 11, 2023

drajamal commented Apr 11, 2023

jmalexan commented Apr 15, 2023

SaveliiLukash commented May 16, 2023

fzsf163 commented May 23, 2023

stephen-spar commented May 23, 2023

Afrozefathima commented May 26, 2023

Afrozefathima commented May 26, 2023

fzsf163 commented May 26, 2023

github-actions bot commented Jun 28, 2023

shanejonas commented Oct 29, 2022 •

edited

Loading

cachho commented Nov 6, 2022 •

edited

Loading