react-router切换页面后跳转到页面顶部

广告位招租
扫码页面底部二维码联系

在使用react-router做路由的时【原创不易,请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】候,会发现如果直接使用,当你采用一些特殊【转载请注明来源】【版权所有】唐霜 www.tangshuang.net的overflow元素时,会发现切换页面未经授权,禁止复制转载。【本文首发于唐霜的博客】后scrollbar在原位不动,这导致一【访问 www.tangshuang.net 获取更多精彩内容】【作者:唐霜】些不好的体验,因为用户切换界面常常是要查【原创不易,请尊重版权】本文作者:唐霜,转载请注明出处。看全新的内容。之所以产生这个问题,很大的【本文首发于唐霜的博客】本文作者:唐霜,转载请注明出处。原因是virtual dom带来的负面影【本文首发于唐霜的博客】本文版权归作者所有,未经授权不得转载。响。virtual dom仅利用数据对要本文版权归作者所有,未经授权不得转载。转载请注明出处:www.tangshuang.net生成的dom结构做diff计算,只更新那【本文受版权保护】【原创内容,转载请注明出处】些改变了的元素。而react-route著作权归作者所有,禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netr带来的结果是,仅route内部组件的部本文版权归作者所有,未经授权不得转载。【本文受版权保护】分节点发生了变化。所以,对于有scrol著作权归作者所有,禁止商业用途转载。【原创不易,请尊重版权】lbar的那个元素而言,没有变动,scr【转载请注明来源】【本文受版权保护】ollbar的位置也不会改变。

【原创不易,请尊重版权】【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【原创内容,转载请注明出处】

解决的办法是创建一个container组【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号:wwwtangshuangnet】件,在这个组件中去执行dom操作,让sc【本文受版权保护】未经授权,禁止复制转载。rollbar跳转到顶部去:

【版权所有,侵权必究】【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】
import { withRouter } from "react-router-dom";
class ScrollToTop extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            document.getElementById("page").scrollTo(0, 0);
        }
    }
    render() {
        return this.props.children;
    }
}
const PageContainer = withRouter(ScrollToTop);
// ... 下面是渲染部分 ...
<Router>
  <PageContainer>
    {/* 你的正常的渲染内容 */}
  </PageContainer>
</Router>

解决的方法非常简单,就是在Router下本文作者:唐霜,转载请注明出处。原创内容,盗版必究。面再放一个根性质的组件,Router会给【作者:唐霜】著作权归作者所有,禁止商业用途转载。下面的组件传递location, mat转载请注明出处:www.tangshuang.net原创内容,盗版必究。ch等props,所以,可以在这个组件里【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】面进行监听,通过判断来决定是否要执行sc【版权所有】唐霜 www.tangshuang.net【本文受版权保护】rollTo(0, 0)这样的操作。上面未经授权,禁止复制转载。未经授权,禁止复制转载。红色的部分则是需要自己进行修改,甚至,你【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】可以把这个组件进行丰富,根据你的项目需要【关注微信公众号:wwwtangshuangnet】本文作者:唐霜,转载请注明出处。来决定什么时候要跳,哪些元素要跳。

【本文受版权保护】【原创内容,转载请注明出处】原创内容,盗版必究。【未经授权禁止转载】
本文版权归作者所有,未经授权不得转载。原创内容,盗版必究。

2018-01-26 6808

为价值买单,打赏一杯咖啡

本文价值68.08RMB