import {
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
 
export default function Root() {
  return (
    <html>
      <body>
        {/* ... */}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

Props

`getKey`

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

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

説明

location.keyを使用すると、ブラウザのデフォルトの動作をエミュレートします。ユーザーはスタック内で同じURLに複数回移動できますが、各エントリには復元するための独自のスクロール位置が設定されます。

一部のアプリでは、この動作をオーバーライドして、別のものに基づいて位置を復元する必要がある場合があります。4つの主要なページを持つソーシャルアプリを考えてみましょう。

"/home"
"/messages"
"/notifications"
"/search"

ユーザーが"/home"から始めて少しスクロールし、ナビゲーションメニューで"messages"をクリックし、次にナビゲーションメニューで"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.key;
  }}
/>

`nonce`

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

<ScrollRestoration nonce={cspNonce} />

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

新しい場所に移動すると、スクロール位置はページの上部にリセットされます。リンクとフォームから「スクロールトップ」動作を回避できます。

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

参照: <Form preventScrollReset>、<Link preventScrollReset>

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