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

问题描述: 在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组件包裹, 就可以在切换路由时将页面置顶了