コンポーネント内リンクの描画ズレの修正

Javascriptのクライアントサイド・ルーティングを使用している場合、リンク先への遷移時にスクロール位置がリセットされないことがあります。
HTMLのaタグではページトップに遷移するため、利用時の違和感があります。

コンポーネント内リンクのスクロール位置を修正するには、window.scrollTo(0, 0)を遷移処理に追加する必要があります。

たとえばReact向けのRavigerでは、 Linkコンポーネントがaタグの代替となりますが、Link自体には処理を追加できません。“onClick"も機能しませんでした。

そこで、 useLocationChangeでhookしてスクロール処理を呼び出します。

該当箇所を抜粋すると、以下のような実装になります。

const scroll_to_top = () => {
  window.scrollTo(0, 0);
}

const SomeComponent = (props) => {

  useLocationChange(scroll_to_top);

}

useLocationChangeはpath変更ごとに呼び出されるため、個別のLinkには特に追加処理は必要ありません。

⁋ 2021/05/06↻ 2024/11/07