react 回退到前一页面对应位置

  由于react的在跳转页面的时候，实际做了unmount的动作，清楚了前一页面的内容，返回的时候实际上是需要重新渲染的，相应的跳转位置就会丢失。我再做项目开发的过程中也遇到了相同的问题，我把我解决的过程分享给大家，希望能够帮到你。

 解决问题的技术背景

1.我们的app是使用了上啦加载下啦刷新的插件（自己封装的），采用的是固定的高度（屏幕高度），自定义滚动轴（非浏览器滚动轴），这个插件会实时的记录滚动位置。

2.APP首页分为十一个子模块，每个子模块都有一个接口去拉取对应模块的数据，拉取完成后会将数据存储到redux里面

3.首页的每个模块都有很多链接跳转到其他页面（商品列表，商品详情，活动专题页面，快速下单页面等）

4.app使用的技术栈react + redux + react-router 

存在的问题以及要解决的问题

1.首页滚动后跳转到其他页面，然后点击返回的时候，首页又重新回到了首页，如果已经滚动了十几页，客户再访问的时候又需要重新滚动到下面，体验很差，运营希望解决掉这个问题，返回的时候还返回到对应跳走的位置，不仅仅是首页 也包括（产品列表页，专题页面，快速下单页面，文章列表页面等）

解决过程

解决思路如下

1.我采用的是把数据先全部保存到redux里面，减少返回重新请求服务器的次数，也减少请求服务器的时间

2.在页面跳转的时候，由于首页，列表页，快速下单，以及其他的列表页面我都引入了上啦加载下拉刷新组件（我再后面的介绍中撑为pullload）,在pulload中实际上是有实时将scroll位置记录到redux里面的，所以我只要在pullload 卸载（unmount）的时候将scroll位置以及对应的页面记录到redux里面就可以了。

3.在history.back的时候，判断redux里面是否有当前页面的值，如果有取出来

4.在 componentDidMount中判断是否有对应的scroll值，如果有，则 在setTimeout中调用pulload的moveTo方法滚动到对应位置

5.因为直接pullLoad到对应位置会先展示页面的头部在跳转到对应位置，先的很生硬，所以我再state中加了一个visibility：visible状态变量，滚动到对应位置后，200秒延迟将页面显示出来