react-router頁面滾動時，頁面位置問題？

01-04

寫了幾個頁面，才發現了一個比較嚴重的問題，就是整個react應用都在同一個body里。
就比如有兩個頁面，第一個頁面沒滾動，點進去第二個，滾到底，返回第一個頁面也滾到底了。這問題怎麼解決，不解決都沒法用了？

Github 上有相關問題的討論 Scroll to top on route change? · Issue #2019 · reactjs/react-router · GitHub

結論就是 React Router 不維護 scroll position，所以你有兩個選擇：

1. 使用 react-router-scroll GitHub - taion/react-router-scroll: React Router scroll management

2. 在 onUpdate 時調用 window.scrollTo 滾到頂部

我在開發過程中也遇到了這個問題，我開發一個表格帶分頁的，當點擊下一頁時，頁面數據刷新了，但只停留在分頁按鈕哪裡，沒有滾動到最上面，還得自己手動滾動，我目前的解決方案是：在觸發點擊之後添加一個window.scrollTo（0，0），題主的遇到的問題，可以考慮在componentWillMount裡面添加這個方法

我在用vue-router也發現這個事情，看見大家的處理都是切換路由時讓滾動條回到頂部，但是這樣會有個問題，比如你一個長長的列表頁，每條記錄點進去就是詳情頁，當你在詳情頁返回時，卧槽，回到頂部了！這時感覺死了的心都有（想像一下你在刷知乎，刷到中間點進去一條看，一返回……回到頂部……知乎是真有這個BUG，刷著刷著一返回就給我自動刷新了）

所以我覺得切換路由的時候一概回到頂部感覺有點不太合適呢。

以前還用zepto加自己寫hash做小路由的時候，已經遇到這個問題，這不關xxx-router的事情，我個人覺得這是因為hash的問題（前端菜雞，個人意淫）。因為hash是錨點，跟a標籤里加錨點原理一個樣，當瀏覽器找不到你的錨點時，一般都會自動回到頂部。所以當時為了解決回到頂部的問題，寫了兩篇小東西

用hash解決微信開發無刷新切換頁面返回時滾動條會回到頂部

微信開發安卓頁面出現兩個滾動條其中一條無法滾動可以採用局部區域滾動解決

其實說白了就是用局部滾動條代替全局滾動條……

第一次有人邀請我答題的，好激動。

可是我沒有用過 react呀。

單頁應用使用前端路由的時候，一般路由管理都不會自動做滾動到頂部這樣的事情。

有些路由會給配置，有些不給。

但這些路由都會提供事件或者方法，在路由變化的時候被調用。利用這個機制，自己去控制頁面滾動到頂部就OK了

react router 的GitHub是有issue的解決方案，基本上就是給router 一個on update callback 裡面window scroll to 0,0

為什麼我遇到的是每次都滾到頂部，希望返回的時候是停留在上次位置也不行，每次返回都是在頂部。求問，有人遇到這種情況嗎？