在使用react-router做路由的时【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。候，会发现如果直接使用，当你采用一些特殊本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】的overflow元素时，会发现切换页面【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。后scrollbar在原位不动，这导致一【本文受版权保护】【版权所有，侵权必究】些不好的体验，因为用户切换界面常常是要查著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。看全新的内容。之所以产生这个问题，很大的未经授权，禁止复制转载。【本文首发于唐霜的博客】原因是virtual dom带来的负面影转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。响。virtual dom仅利用数据对要转载请注明出处：www.tangshuang.net【版权所有，侵权必究】生成的dom结构做diff计算，只更新那【本文首发于唐霜的博客】【版权所有，侵权必究】些改变了的元素。而react-route【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】r带来的结果是，仅route内部组件的部本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。分节点发生了变化。所以，对于有scrol著作权归作者所有，禁止商业用途转载。【本文受版权保护】lbar的那个元素而言，没有变动，scr【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。ollbar的位置也不会改变。
【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。ngnet】本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。解决的办法是创建一个container组本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。件，在这个组件中去执行dom操作，让sc未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netrollbar跳转到顶部去：
著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。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【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】ch等props，所以，可以在这个组件里著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。面进行监听，通过判断来决定是否要执行sc【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。rollTo(0, 0)这样的操作。上面未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。红色的部分则是需要自己进行修改，甚至，你【原创内容，转载请注明出处】【本文受版权保护】可以把这个组件进行丰富，根据你的项目需要转载请注明出处：www.tangshuang.net【版权所有，侵权必究】来决定什么时候要跳，哪些元素要跳。
【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。
