刷新页面时React如何回到顶部 - 不要还原滚动位置

Question

我目前正在尝试在页面刷新时滚动到顶部。到目前为止，我已经能够实现在路由更改时滚动到顶部，但是在页面刷新时React总是恢复其先前的位置。如何防止发生这种情况？

以下是我实现滚动到顶部的方法（认为在componenDidMount()中使用window.scrollTo(0, 0)会有帮助，但实际上并没有）：

class ScrollToTop extends Component {

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

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            window.scrollTo(0, 0);
        }
    }

    render() {
        return null;
    }
}

export default withRouter(ScrollToTop);

class App extends Component {

    render() {
        return (
            <BrowserRouter>
                <ScrollToTop/>
                <Header/>
                <Home/>
                <Projects/>

                <div className="follow-cursor"/>
            </BrowserRouter>
        );
    }
}

export default App;

- Tom

---

在页面刷新时，整个应用程序都会重新启动。因此，所有状态都会返回到它们的默认值。如果即使在刷新后也需要执行此功能，则将滚动位置存储在本地存储中，否则使用BE请求进行存储。 - Nayan shah

@Nayanshah 我不想恢复滚动位置，我希望在刷新时它能够滚动到顶部，目前它没有这样做。 - Tom

“不知何故，React 总是恢复其先前的位置。”这是不正确的，React 在滚动方面不会存储任何状态，特别是在页面刷新时。也许您应用程序中的某些内容正在影响位置。 - Hassaan Tauqir

@HassaanTauqir 这很奇怪，我的应用程序几乎没有包含代码。 - Tom

我有相同的行为。当我刷新时，页面会重新加载到之前的位置。很奇怪！ - Mattia

Answer 1

编辑

这个答案是一个更好的解决方法，因为它使用了React的hooks而不是纯JS。

原始

你可以使用一些纯JS来实现：

window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

这将使页面在重新加载之前滚动到顶部，因此当重新加载结束时一切都会很好。

- StackedQ

Answer 2

另一种在 React-17.0.2 中实现自定义滚动到顶部组件的方法是使用 hooks：

步骤 1：创建自定义组件：ScrollToTop.js

import { useEffect } from "react";
import { useLocation } from "react-router";

const ScrollToTop = (props) => {
  const location = useLocation();
  useEffect(() => {
    if (!location.hash) {
      window.scrollTo(0, 0);
    }
  }, [location]);

  return <>{props.children}</>
};

export default ScrollToTop;

步骤2: 在根组件中调用 ScrollToTop 组件：

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Router>
          <ScrollToTop />
    <Switch> ..... </Switch>
            </Router>
      </BrowserRouter>

    </>
  );
}

export default App;
    

- Rigers Leka

---

我觉得这应该是被接受的解决方案，即 accept js 解决方案可能是一种反模式。 - Jamie Nicholl-Shelley

Answer 3

尝试在App.js中使用此解决方案，我已成功实践过。

  useEffect(() => {
    window.history.scrollRestoration = 'manual'
  }, []);

- Mahmuda Akter Disa