Different Scroll Restoration Behaviors for Same Path

[yuki2006]

Hello,

I am using the ScrollRestoration component from React Router in my application and I have a specific requirement related to scroll restoration behavior.

I have a path (let's say /path1) in my application which can be accessed from multiple links. However, I want these links to exhibit different scroll restoration behaviors:

1. Some links (for example, links within the page content) should restore the scroll position when clicked (i.e., if the user had previously scrolled down on /path1, clicking these links should take the user back to the scrolled position).
2. Other links, particularly those accessed from the main menu, should not restore the scroll position and instead should take the user to the top of the page (even if the user had previously scrolled down on /path1).

All of these links lead to the same path (/path1), so differentiating them based on the URL isn't an option. I also want to avoid changing the URL (adding query parameters) to differentiate the links.

Is there a way in React Router to handle this use case? I'd like to have only one ScrollRestoration component in my root component.

Thanks in advance for your help!

[brophdawg11]

You probably want a combination of <ScrollRestoration getKey> and/or <Link preventScrollReset>

[yuki2006]

@brophdawg11
thx comments.

I appreciate the suggestion. Here's my understanding based on your response and my own knowledge:

getKey is a function that allows setting a key for a route, for example, based on the URL. If the same URL is visited again, React Router can restore the scroll position based on this key (by default, it uses a random id).

preventScrollReset when set, it disregards any previous scroll position and keeps the current page's scroll position as is.

Considering these, it seems challenging to have two different links that lead to the same URL but have different scroll restoration behaviors:

1. One link should restore the scroll position.
2. The other link should navigate to the top of the page, disregarding the previous scroll position.

Could you please provide more clarification on how to achieve this behavior without adding query parameters or changing the URL for these links?

[brophdawg11]

getKey receives the entire location, so it also has access to location.state - which would be anything you pass to <Link state>.

preventScrollReset does indeed avoid scrolling back to 0 if no restored scroll position can be found for the getKey result for that location.

You can combine these accordingly. First, set up your app to restore based on location.pathname for this specific path and location.key everywhere else. But we'll also look at location.state to see if this should opt out entirely.

<ScrollRestoration getKey={(location) => {
  // If the location.state has noRestore, just return a new random key every time so it never restores
  if (location.state?.noRestore) { 
    return Math.random().toString(36).substr(2, 8);
  }
  // Otherwise restore all other navigations to /path1 to the prior /path1 scroll position
  if (location.pathname === "/path1") {
    return location.pathname;
  }
  // Otherwise restore by location.key
  return location.key;
}} />

1. One link should restore the scroll position
   • <Link to="/path1"> will now restore to the prior /path1 position
2. The other link should navigate to the top of the page, disregarding the previous scroll position
   • <Link to="/path1" state={{ noRestore: true }}> will now skip restoration and should reset back to the top