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

以上就是我在項目中用來解決，頁面回返時再滾動到之前的瀏覽的位置