-
-
Notifications
You must be signed in to change notification settings - Fork 143
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix active link highlighting when using custom href formatting #444
Conversation
Run & review this pull request in StackBlitz Codeflow. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## v3 #444 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 1 1
Lines 1 1
=========================================
Hits 1 1 ☔ View full report in Codecov by Sentry. |
packages/wouter/src/index.js
Outdated
@@ -236,7 +236,7 @@ export const Link = forwardRef((props, ref) => { | |||
onClick, | |||
href, | |||
// `className` can be a function to apply the class if this link is active | |||
className: cls?.call ? cls(path === href) : cls, | |||
className: cls?.call ? cls(currentPath === (targetPath)) : cls, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Everything looks good! One small question: do we need extra braces around targetPath
here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Definitely not :) No idea what I was thinking. Thanks for the catch — fix pushed.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks and works well! Left one minor comment, but other than that it is ready to be merged.
Previously when we formatted the `href` attribute (for example, to prefix a `#` when using useHashLocation) this would make it not match the current path, which would not have the hash prefix. This patch preserves the target (href, or to) of the Link component and then compares this value to the active path. This should then match. I have also altered some variable names to improve clarity given we now have four different various 'paths' in this component. Fixes molefrog#417
Released in v3.1.3 |
See #417 (comment) for details on the problem.
Previously when we formatted the
href
attribute (for example, to prefix a#
when using useHashLocation) this would make it not match the current path, which would not have the hash prefix.This patch preserves the target (href, or to) of the Link component and then compares this value to the active path. This should then match.
I have also altered some variable names to improve clarity given we now have four different various 'paths' in this component.
I have tested this: in this repo, in my previous reproduction, and in the application I am building — so I feel reasonably confident it fixes my issue at least :)
Fixes #417