remix-run / react-router

Declarative routing for React
https://reactrouter.com
MIT License
53.04k stars 10.3k forks source link

HashRouter and scrolling to an anchor #6146

Closed jacktang closed 6 years ago

jacktang commented 6 years ago

Hello,

I use HashRouter in my react app and the landing page is single-page which use react-scrollchor component to scroll to some section with animation. Say I defined #service section in the landing page, when I click Service and the page scroll to the anchor and finally the URL turn to /#/service(should be /#service), the page is blank. And I leave the example page here

I've read discussion in #394, and I have no idea what's the solution for the anchor link in react-router-dom.

And the scroller code

<Scrollchor to="#services" animate={{offset: 0, duration: 800}} className="section-scroll">Services</Scrollchor>

Thanks.

timdorr commented 6 years ago

As noted in that thread, there is tooling for this: https://github.com/rafrex/react-router-hash-link