如何使用 history.push 在 React 中移动到顶部部分

14 浏览
0 Comments

如何使用 history.push 在 React 中移动到顶部部分

我使用history.push，但是它总是显示下一页的中间、底部或顶部等位置。

我希望每次都能显示下一页的顶部。

请给我一些建议。

0

1 答案

0 Comments

问题原因：在React中使用history.push进行页面跳转时，页面会滚动到新页面的顶部，而不是保留上一页面的滚动位置。

解决方法：在组件的componentDidMount生命周期方法中使用window.scrollTo(0, 0);，将页面滚动位置设置为顶部。这样在使用history.push进行页面跳转时，新页面会自动滚动到顶部。

以下是示例代码：

import React, { Component } from 'react';
class MyComponent extends Component {
  componentDidMount() {
    window.scrollTo(0, 0);
  }
  handleClick = () => {
    this.props.history.push('/new-page');
  }
  render() {
    return (
      

        
      

    );
  }
}
export default MyComponent;

以上代码中，通过在componentDidMount方法中使用window.scrollTo(0, 0)将页面滚动位置设置为顶部。然后通过点击按钮触发handleClick方法，在handleClick方法中使用this.props.history.push('/new-page')进行页面跳转。这样在页面跳转时，新页面会自动滚动到顶部。

0