react-router 位置问题

问题描述

  • 问题1:
    • 滚动一个长页面A
    • 点击一个Link 进入到另外一个长页面B
    • 长页面B没有滚动到顶部
  • 问题2:

期望情况

  • A到B,B页面滚动到顶部
  • B返回到A时页面停留在原来位置

解决方案

  • 利用react-router提供的onUpdate事件
<Router onUpdate={() => window.scrollTo(0, 0)} history={createHashHistory()}>
  ...
</Router>
  • https://github.com/ReactTraining/react-router/issues/2019
  • 缺点可以达到期望一,但是无法到达期望二
  • 引入react-router-scroll
  • 达到期望一,二
  • 缺点:引入三方包,得看用法
  • 利用history.listen监听每次router改变,根据location.action分类处理(推荐
hashHistory.listen(location => {
    setTimeout(() => {
        //浏览器前进后退
        if (location.action === 'POP') { return }
        // Use setTimeout to make sure this runs after React Router's own listener
        window.scrollTo(0, 0);
    })
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,678评论 25 708
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 PS:转载请注明出处作者:TigerChain地址:http...
    TigerChain阅读 23,025评论 3 49
  • ping error: Destination off-link but no route作者 codercjg ...
    codercjg阅读 1,073评论 0 1
  • 站在这些能叫出名字 和叫不出名字的花儿中 我感觉自己 就是一个活在前生和来世的两个人 像花儿一样在风中摇摇晃晃 花...
    甘肃子溪阅读 187评论 0 0
  • 我们这种熬夜成瘾的人,对于夜深时那片刻的寂静总有几分格外的亲切感。而常年睡得晚,也终于明白了一个道理,无论你晚上想...
    nemovivian阅读 130评论 0 0