过渡后的React Scroll页面到顶部

Question

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

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;
}

我尝试过的是：

我放置了＆lt; scrolltopop/＆gt; ＆lt; switch>＆lt; switch/＆gt;以及＆lt; browserrouter /＆gt;如文档中（这些是在单独的文件中）。

与文档不同，我的应用程序中的＆lt; app /＆gt; < /code>在单独的文件中，因此＆lt; scrolltotop /＆gt; < /code>没有放置在其附近。

当我委托时，我会发现它在正确的实例上被击中（当有页面更改时），但是什么也不会发生。我还研究了许多有关同一问题的堆叠式帖子，但我无法纳入他们的建议。

有什么可能的问题：

调用 window.scrollto（0，0）在功能外部似乎不起作用。此功能是否有替代方案？

＆lt; scrolltotop /＆gt; < /code>的放置是否不正确？是否必须在＆lt; app /＆gt; < /code>附近调用它？

Answer 1

您已经走了一半。您确实不需要为其创建一个组件。您可以创建一个自定义钩子并将其放在＆lt; app /＆gt; < /code>中，然后将其拨打：

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>
  )
}

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