单击后退按钮时，React-router 滚动到顶部

Question

我能够通过创建一个方法来解决 react 路由器中的滚动位置问题

 scrollToTop() {
   window.scrollTo(0, 0);
} 

然后使用

将其应用于按钮

onClick={scrollToTop}

这适用于链接，但单击后退按钮时不起作用。我怎样才能使它也适用于后退按钮？

Answer 1

我创建了一个新组件来执行此功能。

ScrollToTop.jsx

   import React, { Component } from 'react';
    import {withRouter} from 'react-router';
    import $ from 'jquery'

    class ScrollToTop extends Component {

      componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) { 
         $('html,body').animate({scrollTop:0},'slow');
         return false;
        }
      }
      render() {
        return (
                 this.props.children

            )
      }
    }

    export default withRouter(ScrollToTop)

在你的 react 应用的根目录添加这个组件

index.js


    import React from 'react'
    import  ReactDOM from 'react-dom'
    import App from './jsx/App.jsx'
    import {browserHistory} from 'react-router'
    import {HashRouter as Routers} from 'react-router-dom'
    import ScrollToTop from './jsx/ScrollToTop.jsx'
    import {Provider} from 'react-redux';
    import {store} from './redux/store'
    ReactDOM.render((
         <Provider store={store}>
           <Routers>
           <ScrollToTop>
                <App />
           </ScrollToTop>
            </Routers>
            </Provider>
        ),document.getElementById('main-container'))