React Router v4 - 切换组件时保持滚动位置

使用React Router v4时，切换组件时保持滚动位置是一个常见的需求。在默认情况下，当切换到新的组件时，页面会回到顶部，这可能会给用户带来不便。但是，我们可以通过一些简单的方法来解决这个问题，使切换组件时能够保持滚动位置。

npm install react-router-dom

javascript
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class HomePage extends Component {
  componentDidMount() {
    // 在组件挂载后，将滚动位置重置为之前保存的位置
    window.scrollTo(0, this.props.scrollPosition);
  }
  componentDidUpdate(prevProps) {
    // 在组件更新后，保存当前的滚动位置
    if (this.props.location !== prevProps.location) {
      this.props.saveScrollPosition(window.pageYOffset);
    }
  }
  render() {
    return (
      
        {/* 组件内容 */}
      
    );
  }
}
// 使用withRouter包装HomePage组件，注入路由相关的信息
export default withRouter(HomePage);

javascript
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import HomePage from './HomePage';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      scrollPosition: 0
    };
  }
  saveScrollPosition = (position) => {
    this.setState({ scrollPosition: position });
  }
  render() {
    return (
      
        
                      path="/"
            render={(props) => (
                              {...props}
                scrollPosition={this.state.scrollPosition}
                saveScrollPosition={this.saveScrollPosition}
              />
            )}
          />
          {/* 其他路由 */}
        
      
    );
  }
}
export default App;