react-router-dom 路由切换页面跳转到顶部
问题描述: 在react里使用路由跳转页面的时候, 如果页面不是在顶部, 那么在跳转完成以后, 页面是不会自动跳到顶部的。如果用过Vue的朋友应该知道, Vue的Vue-router是有一个配置项, 可以监听路由跳转, 然后对滚动条做出自定义操作的:new Router({scrollBehavior: ()=>({y:0}),// 用箭头函数返回一个对象, x表示...
·
问题描述: 在react里使用路由跳转页面的时候, 如果页面不是在顶部, 那么在跳转完成以后, 页面是不会自动跳到顶部的。
如果用过Vue的朋友应该知道, Vue的Vue-router是有一个配置项, 可以监听路由跳转, 然后对滚动条做出自定义操作的:
new Router({
scrollBehavior: ()=>({y:0}), // 用箭头函数返回一个对象, x表示横向滚动条位置, y表示纵向滚动条位置
routes: routes
})
而在react-router-dom里是没有这种配置的, 这个效果, 需要我们自己来实现:
react实现方法:
react-router-dom里有一个叫withRouter的高阶组件, 作用是将router的三个对象: history, location, match 包装到传入的组件的props, 使得被包装的组件可以在路由切换时通过 componentDidUpdate 这个生命周期函数监听到路由的变化, 从而可以让我们对滚动条进行操作, 达到路由切换时让页面跳到顶部:
import {Component} from 'react';
import {withRouter} from 'react-router-dom'
class ScrollToTop extends Component {
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.location.pathname!==prevProps.location.pathname){
window.scrollTo(0,0)
}
}
render() {
return (
this.props.children
);
}
}
export default withRouter(ScrollToTop);
新建一个ScrollToTop组件, 监听componentDidUpdate事件, 比较更新前后的location.pathname, 如果改变了, 就将滚动条滚动到顶部。
import React from 'react';
import {HashRouter as Router, Route, Switch} from 'react-router-dom'
import ScrollToTop from '@/components/ScrollToTop/index' // 用于切换路由时,将页面滚动到最上面
import routes from '@/routers'
function App() {
return (
<Router>
<ScrollToTop>
<Switch>
{
routes.map((route, index) => {
return (
<Route exact path={route.path} key={index}
render={props => {
return <route.component {...props} routes={route.children}/>
}}
/>)
})
}
</Switch>
</ScrollToTop>
</Router>
);
}
export default App;
使用时就将路由用ScrollToTop组件包裹, 就可以在切换路由时将页面置顶了
更多推荐
已为社区贡献1条内容
所有评论(0)