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);
      }
    });
  }

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