<Link>
with href="#someexample"
will not trigger CSS target selector (#someexample:target{...}
)
#51346
Open
1 task done
Labels
area: app
App directory (appDir: true)
bug
Issue was opened via the bug report template.
Navigation
Related to Next.js linking (e.g., <Link>) and navigation.
Verify 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>
tagWhich browser are you using? (if relevant)
chrome
How are you deploying your application? (if relevant)
localhost
The text was updated successfully, but these errors were encountered: