过渡后将滚动页面反应到顶部

Question

我希望当单击网站内的另一个页面时，我的应用程序能够转到页面顶部。我使用了以下代码：https://v5.reactrouter.com/web/guides/scroll-restoration并放入单独的文件中。

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

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

我尝试过的：

我已将

<ScrollToTop />

放在

<Switch />

之前和

<BrowserRouter />

之后，如文档中所示（这些位于单独的文件中）。

与文档不同，我的应用程序中的

<App />

位于单独的文件中，因此

<ScrollToTop />

未放置在它附近。

当我console.log时，我看到它在正确的实例中被命中（当页面发生更改时），但没有任何反应。我还研究了许多关于同一问题的 stackoverflow 帖子，但我无法采纳他们的建议。

可能出现的问题是什么：

在函数外部调用 window.scrollTo(0, 0) 似乎不起作用。此功能有任何替代品吗？

<ScrollToTop />

的位置是否不正确？一定要在

<App />

附近调用吗？

Answer 1

你已经走了一半了。您确实不需要为其创建组件。您可以创建一个自定义挂钩并将其放置在您的

<App />

中，然后调用它：

function App() {

  // Scroll to top on every transition custom hook
  const useScrollToTop = () => {
    const { pathname } = useLocation();

    useEffect(() => {
      window.scrollTo(0, 0);
    }, [pathname]);
  };

  useScrollToTop();

  return (
    <div className="App">
      .......
    </div>
  )
}

这样，每当您转到新页面时，它就会滚动到页面顶部。