Restore scroll position

[jjvattamattom]

I want behaviour similar to what the browser offers. If I scrolled down a long page, opened a new page and immediately went back, it would load the previous page at the same scroll position. React Router always re-renders the view and resets scroll, when we go back. How do I get the 'save scroll' with React Router?

[mjackson]

Yes, we have plans to automatically let you restore the scroll position as you navigate back to pages you've already visited. We already have the functionality in master, but we need remix-run/history#17 to be fixed first.

[jjvattamattom]

Does it cache previously rendered DOM and then restore scroll position? Or is the component mounted again? I would expect scroll position to be meaningless if the component renders differently.

[gaearon]

It can't (and shouldn't) cache the DOM, after all we're in React's paradigm. Yes, it's up to you to render your components the same way. For example if you don't cache the data locally, there's nothing router can do to restore your position. But that's how browser's default behavior works, too, we're just trying to emulate it.

[antonholmquist]

How is this planned to work with async loading of data?

Often the view that you navigate back to will be initially empty, waiting for content to load. As soon as the data is loaded, you typically want to reset the scroll position.

Or is there a way to pre-fetch critical data and feed into the view before mount? That would partly solve the issue.

[ryanflorence]

How is this planned to work with async loading of data?

You need to cache it (or render sever side with it) so when the back button is clicked you get a synchronous render w/ all the data.

[th0r]

@ryanflorence That's a bad news. Can't we restore scroll position only after rendering?

[gaearon]

@th0r The router can't know when your data is ready.

[antonholmquist]

@gaearon If you tell the router, it would now.

I tried Ryan's advice on caching and restoring the data to get the scroll position to restore correctly. Seems to work well.

[th0r]

@gaearon The router knows, when I render something (it means, I already have all the data I need) and it knows it's current state.
We've already discussed this here: #1158 (comment)

[th0r]

@antonholmquist What if user goes 5 pages back? How are you dealing with it?

[vinceprofeta]

@mjackson is there a solution for this? If so where can I find the docs?

[taion]

https://github.com/rackt/react-router/blob/73e6c85f427c48f90bae0bb0e9745b6b48536e2f/CHANGES.md#scrolling

[jackyon]

also waiting a solution for async loading, any news?

I have tried scroll-behavior, seems this not support async loading, the scrolling position were wrong after I pressed back button.