(特に最初の荷積みで)反応でアンカー名に対するCash - Hash断片をロードする方法

どのようにURLのハッシュを実装し、最初の読み込みでの反応の名前をアンカーにスクロール?
URLのハッシュフラグメント(すなわち、)www.mypage.com/article#fragment ) アンカー名にはname or id アンカーのコンテキストで使用する属性.
によるとw3.org , それは2つの規則、ユニークさを観察しなければなりません:文書内でユニークでなければならないと言われて、ストリングマッチング:断片識別子とアンカー名の比較は正確な(大文字と小文字を区別する)マッチによってされなければなりません.
The id 属性を使用して、任意の要素の開始タグにアンカーを作成することができます.
この例では、H 2要素にアンカーを配置するID属性の使用を示します.

...later in the document
<H2 id="section2">Section Two</H2>
...

単純なHTMLドキュメントでは、すべてのDOMがブラウザ上でレンダリングされているので、完全に読み込み時に動作しますが、通常はdiv

...
<div id="root"></div>
...

そして、あなたがChorperハッシュ断片を通してセクションにアクセスしようとするならば(すなわち).www.mypage.com/article#fragment ) 目的のセクションにスクロールしないでください.
この動作はいくつかの理由で起こります.理由は、ページが最初のDOMをロードした後にアンカー名オフセットが実行されるためです.別の理由は、オフセットが外部APIからページコンテンツを取得する前に発生し、ページにコンポーネントをロードしていない(またはスケルトンロードを使用する)場合です.
この問題の解決策は、URLのハッシュを取得するスクロールの手動処理をwindow.location とEventListener'hashchange' 場合によっては、ページ全体が反応コンポーネントから読み込まれると、同じ動作を維持します.以下のすべてのフックを参照してください.

import { useEffect } from "react";

export function useHashFragment(offset = 0, trigger = true) {
  useEffect(() => {
    const scrollToHashElement = () => {
      const { hash } = window.location;
      const elementToScroll = document.getElementById(hash?.replace("#", ""));

      if (!elementToScroll) return;

      window.scrollTo({
        top: elementToScroll.offsetTop - offset,
        behavior: "smooth"
      });
    };

    if (!trigger) return;

    scrollToHashElement();
    window.addEventListener("hashchange", scrollToHashElement);
    return window.removeEventListener("hashchange", scrollToHashElement);
  }, [trigger]);
}

最初のパームoffset ページの上に粘着性のメニューがあれば、2番目は1ですtrigger をクリックすると、いつでもスクロールします.

イメージなしで
ドキュメントが外部リンクを取得しなければならないイメージがない場合、次のように使用できます.

import { useHashFragment } from "./hooks/useHashFragment";
import "./styles.css";

export default function App() {
  const sectionArrary = [1, 2, 3, 4, 5];
  useHashFragment();

  const handleOnClick = (hash: string) => {
    navigator.clipboard
      .writeText(`${window.location.origin}${window.location.pathname}#${hash}`)
      .then(() => {
        alert(
          `Link: ${window.location.origin}${window.location.pathname}#${hash}`
        );
      });
  };

  return (
    <div className="App">
      <h1>How to implement URL hashes and deep-link in react</h1>
      {sectionArrary.map((item) => (
        <section id={`section${item}`}>
          <h2>
            Title Section {item}{" "}
            <button onClick={() => handleOnClick(`section${item}`)}>
              copy link
            </button>
          </h2>
          <p>
            Lorem ipsum ...
          </p>
        </section>
      ))}
    </div>
  );
}

付加的なhandleOnClick キャッチ#hash-fragment からwindow.location で定義されているアンカー名/id<section id="section3"> とnavigation.clipboard.writeText 約束

 const handleOnClick = (hash: string) => {
    navigator.clipboard
      .writeText(`${window.location.origin}${window.location.pathname}#${hash}`)
      .then(() => {
        alert(
          `Link: ${window.location.origin}${window.location.pathname}#${hash}`
        );
      });
  };

ここでチェックすることができますdemo whithout images .


画像で
我々がそうするならば起こることができる1つのもの<img/> 外部リンクを持つタグは、すべての画像が読み込まれる前に名前付きアンカーにスクロールするときに、読み込まれた画像によってドキュメントのサイズが変更されるため、スクロールが失敗することになります.

あなたはそれについて別のフックを補完し、この問題を修正することができます.

あなたが記事が好きであるならば、私を以下に従ってください