React scrolls the paging list to enter the details, and then click the back button, how can you keep the back page in the same position and state as it was before leaving?

problem description

scroll down to the second page on the original list page of the (A) page, click the list < Link to= "xxx" / > to jump to the detailed (B) page, and click the back button on the (B) page to execute this.props.history.goBack () to return to a page that cannot be echoed to the location and data of the (A) page.

problem analysis: this.props.history.goBack () the previous page will re-invoke the component rendering process, which is different from the browser"s native window.history.back (- 1) .

expected results

does react currently have a plug-in that simulates the return or solution of window.history.back (- 1) ?

React-router react.js react-router-redux

Oct.07,2021

in fact, the current Google browser can record the previous scrolling position when it returns, but the compatibility may be poor (you can try whether you want to jump from the list page to the details page and then return)

if you need a more general method, you can use react-keeper instead of react-router , which can return to the previous position of the record

. The principle of

is actually very simple. When you jump, the list page is hidden display:none , and it will be displayed when it is returned. It will not be re-rendered at all, so the scroll bar is still in its original position

componentWillUnmount record the location of the current scroll, (redux or localstorage, and so on. ComponentDidMount reads the scroll location value you recorded earlier

use this http://xialvjun.github.io/sta.

then use css to make the XXX of the full-screen modal box

full screen pop-up window without routing
Pop-up routing: https://reacttraining.com/react-router/web/example/modal-gallery

Previous: How to control the color of text when posting topics on Douyin?

Next: How to gracefully obtain responsive data, dependent data.