`<Link>` with `href="#someexample"` will not trigger CSS target selector (`#someexample:target{...}`)
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
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: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
Node: 18.15.0
npm: 9.5.0
Yarn: 3.4.1
pnpm: 8.6.0
Relevant packages:
next: 13.4.6-canary.7
eslint-config-next: N/A
react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.5
Which area(s) of Next.js are affected? (leave empty if unsure)
App directory (appDir: true), Routing (next/router, next/navigation, next/link)
Link to the code that reproduces this issue or a replay of the bug
https://github.com/tilman/nextlink-css-target-selector-bug
To Reproduce
1.) Open the example under http://localhost:3000/ (for regular pages)
Watch the div below the links wich should turn blue during clicking the links.
Use regular anchor tags:
Click Link 1.) it to see that :target selector changed the style of a div
Click Link 2.): Reset the styling with this link by changing the target to '#'
Use next Link tags:
Click Link 3.) to see that :target selector does not change the style of a div if next/link is used
Click Link 1.)/4.) again to set the blue bg
Clink Link 5.) to reset the styling with this link by changing the target to '#'. Also does not reset the style if regular anchor tag (1./4.) was clicked before to set the style.
2.) Open the example under http://localhost:3000/appExample (for new app dir. Same behaviour)
Describe the Bug
While using a next/link the css :target selector is not working. Only if we use a regular tag.
Expected Behavior
The CSS :target selector should work with next/link the same way as with the <a> tag
Which browser are you using? (if relevant)
chrome
How are you deploying your application? (if relevant)
localhost
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction at github.com/tilman/nextlink-css-target-selector-bug and verify the behavior in both the regular-pages and app-directory examples. Compare the regular anchor and next/link flows in Chrome, then trace the relevant Next.js routing and Link entry points. Done means hash navigation updates the CSS :target selector consistently for next/link in both examples.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, next.js, react
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100