Update URL in browser while scrolling a page in React

Question

I am trying to create a smooth scrolling page in React. Let's say the page is split into 4 sections:

Who we are
About
Members
Alumni

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.

user_15265613 · Answer

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.

Update URL in browser while scrolling a page in React

1 Answers