react-routerページを移動するときにスクロール上部に配置

4767 ワード
React テキストリンク
必要な場合
反応器を用いた開発では,ページ切替のたびにy軸が転がる位置が前のページの位置と一致していることがわかる.一般的なWebサイトと同様に、ページ移動時にy軸をスクロールして最上位に配置します.
react-router
同様にreact-routerを用いることも非常に簡単に実現でき、本書にも詳細な説明がある.よく使うようですが、整理しておきましょう!
インプリメンテーション
ScrollToTop
src/components/common/ScrollToTop/ScrollToTop.jsx
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;
}
(を参照)
複数の講座を受講すれば、講師ごとに構成スタイルが異なり、開発者が自分の都合の良い仕組みを使えばよい.コンポーネント/フォルダでよく使用されるコンポーネントをcommon/として保存し、1ページまたはその構成を担当するファイルをview/に保存できます.
次に、上記で作成したScollToTopコンポーネントをappの最上部、Routerの下部に配置します.
src/App.js
import ScrollToTop from "@/components/common/ScrollToTop/ScrollToTop";

...

function App() {
  return (
    <BrowserRouter>
      <ScrollToTop />
      <NavBar />
      <Switch>
        ...
      </Switch>
      <Footer />
      <BackTop />
    </BrowserRouter>
  );
}

export default App;
簡単です.でも順調でした.
リファレンス
reactrouter正式ドキュメント
GolangによるWebアセンブリのターゲット化入門
Zipgrepを使用したAWSラムダ関数全体のキーワードの検索