react-router Link跳转后不返回页面顶部的问题

遇到的问题

由A页面跳转到B页面，B页面停留在A页面的位置，没有返回到顶部。

问题分析

首先分析下出现此问题的原因： 在项目中使用的是 hashHistory，它是建立在 history 之上的，当路由发生变化时会记住原路由的状态，跳转新页面后默认停留在原页面的位置。

解决方法

• 使用 withRouter；

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

1、定义ScrollToTop组件，代码如下：

import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom';

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

2、在定义路由处引用该组件，代码如下：

ReactDOM.render((
         <div className="section">
              <ScrollToTop>
                    <Switch>
                        <Route path="/app/home" component={Home}/>
                        <Route path="/app/about" component={About}/>
                        <Route path="/app/culture" component={Culture}/>
                        <Route path="/app/join" component={Join}/>
                        <Route path="/app/find" component={Find}/>
                        <Route render={() => (<Redirect to="/app/home"/>)}/>
                        <Route component={Home}/>
                    </Switch>
                </ScrollToTop>
                <Foot/>
            </div>
    );

这样就可以实现路由跳转后返回页面顶部，问题解决！