react-router 4 切换路由跳转到页面顶部

发布时间：2020-12-15 20:21:03 所属栏目：百科来源：网络整理

导读：问题：? 在 React 组件间进行页面跳转后，发现页面的位置并不在页面顶部，而是在页面跳转前的位置。就是说浏览器的滚动条并没有回到顶部的位置。 Vue的解决办法：使用vue-router的时候会有路由守卫?afterEach?方便跳转页面后执行跳转到页面顶部: router.aft

问题：? 在 React 组件间进行页面跳转后，发现页面的位置并不在页面顶部，而是在页面跳转前的位置。就是说浏览器的滚动条并没有回到顶部的位置。

Vue的解决办法：

使用vue-router的时候会有路由守卫?afterEach?方便跳转页面后执行跳转到页面顶部:

router.afterEach(function () { window.scrollTo(0,0); })

但是react-router 却没有这种函数，特别是react-router 4 更是取消了onEnter onUpdate函数.

withRouter可以包装任何自定义组件，将react-router 的 history,location,match 三个对象传入。无需一级级传递react-router 的属性，当需要用的router 属性的时候，将组件包一层withRouter，就可以拿到需要的路由信息

1. 定义ScrollToTop组件：

? ?2. 在定义路由处引用该组件:

? ?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!