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

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