轉換后將滾動頁面反應到頂部

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

歡迎來到 Stackoverflow @user19251203

你已經走了一半了。 你真的不需要為它創建一個組件。 您可以創建一個自定義鈎子並將其放在您的<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>
  )
}

這樣，每當您轉到新頁面時，它都會滾動到頁面頂部。