我在导航到另一个页面时遇到问题,它的位置将保持与以前的页面相同。所以它不会自动滚动到顶部。
我还尝试在onChange路由器上使用window.scrollTo(0,0)。我还使用了scrollBehavior来修复此问题,但它不起作用。有什么建议吗
但是2018年的课程是这样的
使用React钩子的ScrollToTop实现
ScrollToTop.js
从“react”导入{useffect};
从“react router dom”导入{withRouter};
函数ScrollToTop({history}){
使用效果(()=>{
const unlisten=history.listen(()=>{
滚动到(0,0);
});
返回()=>{
不听话();
}
}, []);
返回(空);
}
使用路由器导出默认值(ScrollToTop);
用法:
<;路由器>;
<;碎片>;
<;ScrollToTop/>;
<;开关>;
<;路由路径=“/”精确组件={Home}/>;
</开关>;
</碎片>;
</路由器>;
ScrollToTop也可以作为包装器组件实现:
ScrollToTop.js
导入React,{useffect,Fragment}来自“React”;
从“react router dom”导入{withRouter};
函数ScrollToTop({history,children}){
使用效果(()=>{
const unlisten=history.listen(()=>{
滚动到(0,0);
});
返回()=>{
不听话();
}
}, []);
返回<;Fragment>;{children}<;/Fragment>;;
}
使用路由器导出默认值(ScrollToTop);
用法:
<;路由器>;
<;ScrollToTop>;
<;开关>;
<;路由路径=“/”精确组件={Home}/>;
</开关>;
</ScrollToTop>;
</路由器>;