ReactJS 页面跳转保存当前scrollTop回来时，自动移动到上次浏览器的位置

在移动端的操做的时候，相信你们都遇到到这种状况，翻了好几页了，点击一项进去查，而后回来的时候，还想回来我原来的位置。

google上也找了一此，有一个组件，可是好像是若是想实现这个功能，页面就得用那个组件包进来。

一个项目已经写了几十个页面了，每一个页面都去把他包进去，而后再实现组件里的方法，太痛苦了。

后来发现router里有onEnter onLeave事件，那就在这里作文章吧。这就方便多了，就在router.jsx每一个里面加 onEnter={()=>{}} onLeave = {()=>{..}} 若是之后再添加页面，又得复制一下这两个事件，这样也很麻烦是吧。

之前用 asp.net 要给页面上全部button都添加统一的事件，或CS程序里哪页面都添加事件等功能，就在想我也统一的，在给router里的信息统一添加 onEnter onLeave事件呢？这样个人router.jsx文件里是否是简洁多了。

这样一来，我只要找到Router里第一个组件，在那个作文章不就能够了。其它的什么都不用大动，因为咱们在写项目的router里的第一组件名是 app以下图所示：

那就找到 App.这个组件，在componentWillMount这个方法里。开始对路由进行统一添加onEnter onLeave

componentWillMount(){
    this.__PreserveRouterComponentEnterAndLeveScrollTop();
  }
  /**
   * 保存路由切换时的 scroll top 的值。
   * */
  __PreserveRouterComponentEnterAndLeveScrollTop() {
    const { children } = this.props; 
    const { props } = children || {};
    const { routes } = props || {};
    if (!Array.isArray(routes)) {
      return;
    }
    const { childRoutes } = routes[0];
    if (!Utility.isArray(childRoutes)) {
      return;
    }
    const __KeyScroll = 'XTN_ROUTER_SCROLLTOP';
    // 页面离开的时候，记录当前的scrollTop位置
    const __onLeave = (args) => {
      const __Data = this.state[__KeyScroll] || {};
      __Data[args.toLocaleLowerCase()] = window.document.body.scrollTop;
      this.state[__KeyScroll]= __Data;
    };
    // 页面进入的时候，查找以前的scrollTop位置，有就更新到以前的位置。
    const __onEnter = (args) => {
      const { location } = args;
      const { pathname } = location;
      const __Data = this.state[__KeyScroll];
      if (__Data && __Data[pathname] && __Data[pathname] > 0) {
        // 为何这里要晚点时间再更新，由于在切换这后，页面作一些其它的操做因此就设置了这个时间。
        setTimeout(() => { window.document.body.scrollTop = __Data[pathname]; }, 1000); } }; // 循环将全部路由，将他们都绑定onLeave及onEnter事件。 childRoutes.forEach((r) => { r.onLeave = __onLeave.bind(r, r.path); r.onEnter = __onEnter.bind(r); }); /* * 这里就怎么说呢，若是调试了的话，就会发现这个数组有两个，有一个IndexRoute * IndexRoute 这个是不会存在于 childRoutes 里面的，因此在这里得单独处理一下。 * 其实下面的代码仍是能够完善的。 * */ routes.forEach((r) => { const { path, isIndex } = r; if (path) { r.onLeave = __onLeave.bind(r, r.path); r.onEnter = __onEnter.bind(r); } // 这里就说明是 IndexRoute 这个路由， if (isIndex === 1) { r.onLeave = __onLeave.bind(r, '/'); r.onEnter = __onEnter.bind(r); } }); } 

以上就是我在项目中用来解决，页面回返时再滚动到以前的浏览的位置