在每次转换时滚动至顶部

我在导航到另一个页面时遇到问题,它的位置将保持与以前的页面相同。所以它不会自动滚动到顶部。
我还尝试在onChange路由器上使用window.scrollTo(0,0)。我还使用了scrollBehavior来修复此问题,但它不起作用。有什么建议吗

但是2018年的课程是这样的

使用React钩子的ScrollToTop实现

ScrollToTop.js

从“react”导入{useffect};
从“react router dom”导入{withRouter};
函数ScrollToTop({history}){
使用效果(()=&gt{
const unlisten=history.listen(()=&gt{
滚动到(0,0);
});
返回()=&gt{
不听话();
}
}, []);
返回(空);
}
使用路由器导出默认值(ScrollToTop);

用法:

<路由器>
<碎片>
<ScrollToTop/>
<开关>
<路由路径=“/”精确组件={Home}/>
&lt/开关>
&lt/碎片>
&lt/路由器>

ScrollToTop也可以作为包装器组件实现:

ScrollToTop.js

导入React,{useffect,Fragment}来自“React”;
从“react router dom”导入{withRouter};
函数ScrollToTop({history,children}){
使用效果(()=&gt{
const unlisten=history.listen(()=&gt{
滚动到(0,0);
});
返回()=&gt{
不听话();
}
}, []);
返回<Fragment>{children}</Fragment>;
}
使用路由器导出默认值(ScrollToTop);

用法:

<路由器>
<ScrollToTop>
<开关>
<路由路径=“/”精确组件={Home}/>
&lt/开关>
&lt/ScrollToTop>
&lt/路由器>

发表评论