Open firmart opened 2 years ago
I'd like to suggest another solution that looks much cleaner to me: a component that watch for url hash change and handle scroll on render, rather that on click. It doesn't require that package and works with useNavigate
out-of-the-box.
https://gist.github.com/Vinorcola/93f8431bb190895f5de423db25f3890f
react-router-hash-link
's components work perfectly, however I have a situation in which I need tonavigate
(usinguseNavigate
fromreact-router
v6) programmatically: the scroll feature is thus gone. It's actually pretty easy to wrapreact-router-hash-link
codebase into a hook, here is the working snippet:Basically, everything remains the same, except some variables are passed to functions. The function returned by the hook
useScrollNavigate
is used exactly in the same way asnavigate
returned byuseNavigate
.useScrollNavigate
accepts the same extra options of theHashLink
component:{smooth: Boolean, scroll: Function}
. The components can then directly use this hook to reuse the business logic. Didn't make a PR as I don't have much time and not quite sure if these changes make sense at all.