feat(router): Add option to not reset scroll to the top on navigate/link

[guitheengineer]

Problem

After every route navigation, when the page being rendered mounts, redwood scrolls to the top.
This is the desired behavior for most navigations, but not for a param update, where the same page is being rendered and just the param changes.

A common use case for this is using route params as state, e.g an id param that sets the current item being viewed. In this case we don’t want our browser to scroll to the top because they may lose the position in which they were previously when seeing those records
(e.g user is deep down seeing the 36th item on a table, after clicking on a row, they get scrolled to the top and lose where they were)

See reproduction of the issue below. When opening something like a sidebar that sets the id param, the scroll resets to the top.

Screen.Recording.2024-08-28.at.4.02.28.PM.mov

Note that redwood already avoids scrolling to the top if its a hash param update, but is not always that a hash is used for these cases.

Solution

Implement a scroll option on the navigate and link. Defaults to true, when set to false, won’t scroll to top.

navigate(`?id=${id}`, { scroll: false })

<Link to={`?id=${id}`} options={{ scroll: false }} />

Screen.Recording.2024-08-28.at.4.03.17.PM.mov

This would solve #9054

[Josh-Walker-GM]

Hey @guitheengineer 👋 Thanks for this! We'll probably need to have a discussion about this as a team just because it changes/introduces a user facing interface. Given our schedule, it could be a week before I have any good feedback on this 😬 Just know that we will get back to you within the week and we very much appreciate the contribution!

[guitheengineer]

Hey @guitheengineer 👋 Thanks for this! We'll probably need to have a discussion about this as a team just because it changes/introduces a user facing interface. Given our schedule, it could be a week before I have any good feedback on this 😬 Just know that we will get back to you within the week and we very much appreciate the contribution!

Sounds good!

For context, we used redwood and had to develop our own "hack" to get over the scroll reset in several pages

  useEffect(() => {
    const original = window.scrollTo
    window.scrollTo = () => {}

    return () => {
      window.scrollTo = original
    }
  })

An option to have a scroll: false exists in popular alternatives like react-router, next router, etc and would solve our problem