aobarbieri
commented
10 months ago Interesting finding with the scrollbar state, I found that bug in my application as well now that you mentioned!
After some quick research I read that React Router by default does not automatically scroll to the top of the new page when we navigate to it. In addition to the ScrollRestorarion you've found, another solution would be using useEffect hook and set the window.scrollTo(0, 0), where window.scrollTo(0, 0) scrolls the page to the top when the component mounts (apply this in the page set as a path for a Link). Simpler approach if you are already using useEffect on that specific page.
You have the right mindset regarding reading documentation, that is crucial in the development and maintenance of code. There are lots of information out there but the official documentation would provide us the best practices to maintain a consistent and high-quality codebase.
Keep it up! 🚀
I found a bug this morning on my react Link components - it seemed to be preserving the scrollbar state when it 'navigates' the user to new content. I hadn't thought about this until I had more time to test towards the end. Looking through the docs, v6 has this new concept of data routers that may have the solution to my issue - they've supplied a new ScrollRestoration component which would seem to fix it.
While I did some critical pivots to get to MVP, I wish I had done less refactoring and more react/react-router deep-diving to get a much better understanding of all the tools they provide. I started to dig through docs and I stumbled upon their Escape Hatches section, where they do some deep diving on Effects, their intended uses, and where you may not need them. The Managing State section talked about some really good, broader concepts around state too.
tl;dr - read through docs and develop a good understanding the hooks and components you will be using, prior to using them