Mrabit的博客
0%

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

发表于

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

1
2
3
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组件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import { withRouter } from "react-router-dom";

class ScrollToTop extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.location.pathname !== prevProps.location.pathname) {
      window.scrollTo(0, 0);
    }
  }
  render() {
    return this.props.children;
  }
}

export default withRouter(ScrollToTop)
  1. 在定义路由处引用该组件:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import ScrollToTop from '../components/ScrollToTop';
export default class Root extends Component {
  render() {
    return (
      <Router>
        <ScrollToTop>
          <Header />
          <Menus />
          {/* 首页 */}
          <Route exact path="/" component={Home} />
          {/* 图文 */}
          <Switch>
            <Route exact path="/one" component={OneList} />
            <Route path="/one/:id" component={OneDetails} />
          </Switch>
        </ScrollToTop>
      </Router>
    )
  }
}

参考地址：