ScrollRestoration

`<ScrollRestoration>`

このコンポーネントは、loader の完了後に位置の変更に対するブラウザのスクロール復元を模倣します。これにより、クロスドメインの場合でも、スクロール位置が正しいタイミングで正しい位置に復元されることが保証されます。

<Scripts/> コンポーネントの前に1つだけレンダリングする必要があります。

import {
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";

export default function Root() {
  return (
    <html>
      <body>
        {/* ... */}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

プロパティ

`getKey`

オプション。スクロール位置を復元するためのキーを定義します。

<ScrollRestoration
  getKey={(location, matches) => {
    // デフォルトの動作
    return location.key;
  }}
/>

説明

location.key を使用することで、ブラウザのデフォルトの動作を模倣します。ユーザーは同じ URL にスタック内で複数回ナビゲートでき、各エントリは復元用の独自のスクロール位置を取得します。

一部のアプリケーションでは、この動作を上書きし、他のコンテンツに基づいて位置を復元したい場合があります。4つのメインページを持つソーシャルアプリケーションを考えてみましょう：

/home
/messages
/notifications
/search

ユーザーが /home から始めて、少し下にスクロールし、ナビゲーションメニューで メッセージ をクリックし、次にナビゲーションメニューで ホーム をクリックした場合（戻るボタンではなく！）、履歴スタックには3つのエントリがあります：

1. /home
2. /messages
3. /home

デフォルトでは、React Router（およびブラウザ）は、同じ URL を持っていても、1 と 3 に対して2つの異なるスクロール位置を保存します。これは、ユーザーが 2 から 3 にナビゲートするとき、スクロール位置は 1 の位置に復元されるのではなく、トップに移動することを意味します。

ここでの堅実な製品の決定は、ユーザーがどのようにそこに到達したか（戻るボタンまたは新しいリンクのクリック）に関係なく、ホームページにスクロールさせることです。これを行うには、キーとして location.pathname を使用する必要があります。

<ScrollRestoration
  getKey={(location, matches) => {
    return location.pathname;
  }}
/>

または、特定のパスに対してのみパス名を使用し、他のすべてのパスに対して通常の動作を使用したい場合もあります：

<ScrollRestoration
  getKey={(location, matches) => {
    const paths = ["/home", "/notifications"];
    return paths.includes(location.pathname)
      ? // ホームと通知はパス名で復元
        location.pathname
      : // その他はブラウザのように location で
        location.key;
  }}
/>

`nonce`

<ScrollRestoration> は、スクロールのちらつきを防ぐためにインライン <script> をレンダリングします。nonce 属性は、CSP nonce の使用を許可するためにスクリプトタグに渡されます。

<ScrollRestoration nonce={cspNonce} />

スクロールリセットの防止

新しい位置にナビゲートすると、スクロール位置はページのトップにリセットされます。リンクとフォームの トップへスクロール の動作を防ぐことができます：

<Link preventScrollReset={true} />
<Form preventScrollReset={true} />

他の情報：<Form PreventScrollReset>、<Link PreventScrollReset>