Scroll to hash link / Conditionally opt out of ScrollRestoration

[chrome flume]

I'm trying to implement hash links where clicking on a link like "/my-page#my-element" should navigate the user (scrolling if necessary) to the matching html (id="my-element") element on the "/my-page" route.

My current implementation using a Link component does not work reliably. I think it conflicts with the standard ScrollRestoration which scrolls the back to the top of the window on navigation.

I can add code on the given route to scrollTo that element once the route renders, but I want to avoid a double scroll "scroll up, then scroll down" user experience so I am curious if there is a way to opt out of the ScrollRestoration for this scenario?

Maybe I need to implement a custom ScrollRestoration instead of the standard ScrollRestoration exported from the library?

[shrewd trout]

I'm not sure if this helps or not, but you can prevent the default scroll restoration on <Link> using preventScrollReset:
https://api.reactrouter.com/v7/interfaces/react_router.LinkProps.html#preventScrollReset

[chrome flume]

Thanks, unfortunately it looks like the “framework mode” ScrollRestoration may not take that into account

[shrewd trout]

interesting, I'm pretty sure we've succesfully used it to prevent scrolling up with a modal route, but I can't remember for sure

just checked - we definitely used it, and it seemed to work - this is for an in-development project, so we've not fully tested it. Maybe try it in isolation to see?

[chrome flume]

Aha, I checked again.. you are right! That should work for me, thanks!