I am trying to create a smooth scrolling page in React. Let's say the page is split into 4 sections:
So on scrolling, if it's at the section 'Members' with the id=members the URL should be updated to: website.com/who-we-are#members so he can copy this link, and when you access this URL to send you directly to that section.
You should use IntersectionObserver to determine if a section is in the viewport. Use a ref as target. Use an Effect hook to create the IntersectionObserver.
Then you can update the location per document.location.replace(). You can also use e.g. the convenient useHistory() hook of React Router.