-
-
Notifications
You must be signed in to change notification settings - Fork 150
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
[BUG] useHashLocation
not syncing with state
#417
Comments
useHashLocation
not syncing with stateuseHashLocation
not syncing with state
Hi! I can't reproduce this, would you mind sharing your code? |
Hey! Yeah so it is really simple, just a home page and an App component: export default function App() {
return (
<>
<Nav />
<main>
<Router hook={useHashLocation}>
<Switch>
<Route path="/config" component={Config} />
<Route path="/" component={Home} />
</Switch>
</Router>
</main>
</>
);
} |
Does your link look like |
Hello — I think I stumbled on this issue today and can share a reproduction. Here's a replit link that has runnable code: https://replit.com/@neoeno/Reproduction-of-wouter-active-links-issue-with-hash-location An example of how it looks in the browser: Screen.Recording.2024-05-07.at.17.23.24.movAnd here's the relevant code: // App.jsx
import "./App.css";
import { Route, Router, Link } from "wouter";
import { useHashLocation } from "wouter/use-hash-location";
export default function App() {
return (
<>
<h1>Default useBrowserLocation activates the links</h1>
<Router>
<ul>
<li>
<Link
href="/route-one"
className={(active) => (active ? "active" : "normal")}
>
Link to Route One
</Link>
</li>
<li>
<Link
href="/route-two"
className={(active) => (active ? "active" : "normal")}
>
Link to Route Two
</Link>
</li>
</ul>
<Route path="/route-one">
<p>Route One</p>
</Route>
<Route path="/route-two">
<p>Route Two</p>
</Route>
</Router>
<h1>useHashLocation does not activate the links</h1>
<Router hook={useHashLocation}>
<ul>
<li>
<Link
href="/route-one"
className={(active) => (active ? "active" : "normal")}
>
Link to Route One
</Link>
</li>
<li>
<Link
href="/route-two"
className={(active) => (active ? "active" : "normal")}
>
Link to Route Two
</Link>
</li>
</ul>
<Route path="/route-one">
<p>Route One</p>
</Route>
<Route path="/route-two">
<p>Route Two</p>
</Route>
</Router>
</>
);
} /* App.css */
.active {
border: 1px solid red;
} I believe the issue occurs here: https://github.com/molefrog/wouter/blob/v3/packages/wouter/src/index.js#L239 return asChild && isValidElement(children)
? cloneElement(children, { onClick, href })
: h("a", {
...restProps,
onClick,
href,
// `className` can be a function to apply the class if this link is active
className: cls?.call ? cls(path === href) : cls, // <------
children,
ref,
}); From debugging, Thanks for all your hard work on wouter! Please do say if you'd appreciate a PR to fix. |
hi @neoeno, this is indeed a bug. the |
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
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
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 #417
With the
useHashLocation
hook, the active route does not sync with the current state/location, once it is updated. The initial location loads the correct route.For example/reproduction:
test
. Add a link from it to the index (#/
) or anavigate()
call (usinguseLocation
)#/test
The text was updated successfully, but these errors were encountered: