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

Posted 2023-02-22

【中文标题】单击后退按钮时，React-router 滚动到顶部

【英文标题】：React-router scroll to top when back button is clicked

【发布时间】：2018-04-28 02:19:03

【问题描述】：

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

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

然后使用

将其应用于按钮

onClick=scrollToTop

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

【问题讨论】：

返回按钮意味着您正在完全渲染其他组件。尝试在导航到的componentWillMount 或componentDidMount 中添加此方法。

reacttraining.com/react-router/web/guides/scroll-restoration/… 他们在生命周期方法中的文档上有这个

【参考方案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'))