`<ScrollRestoration />`

這個元件會在載入器完成後模擬瀏覽器的捲動復原，以確保捲動位置復原到正確的位置，甚至跨網域。

這個功能只有在使用資料路由時才有效，請參閱選擇路由

您只應該渲染其中一個，而且建議您在應用程式的根路由中渲染它

import { ScrollRestoration } from "react-router-dom";

function RootRouteComponent() {
  return (
    <div>
      {/* ... */}
      <ScrollRestoration />
    </div>
  );
}

`getKey`

定義 React Router 應使用來復原捲動位置的鍵的選用屬性。

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

預設情況下，它使用 location.key，模擬瀏覽器的預設行為，而無需客戶端路由。使用者可以在堆疊中多次導覽到相同的網址，並且每一個條目都會有自己的捲動位置要復原。

有些應用程式可能想要覆寫此行為，並根據其他條件復原位置。考慮一個有四個主要頁面的社交應用：

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

如果使用者從 "/home" 開始，捲動一點，按一下導覽選單中的 "messages"，然後按一下導覽選單中的 "home"（不是返回按鈕！）歷史堆疊將會有三個條目

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

預設情況下，React Router（和瀏覽器）將有兩個捲動位置儲存在 1 和 3，即使它們有相同的網址。這表示當使用者從 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)
      ? // home and notifications restore by pathname
        location.pathname
      : // everything else by location like the browser
        location.key;
  }}
/>

防止捲軸重置

當導航建立新的捲軸金鑰時，捲軸位置會重置為頁面頂端。您可以防止連結和表單執行「捲軸到頂端」的行為

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

另請參閱：<Link preventScrollReset>、<Form preventScrollReset>

捲軸快閃

如果您沒有像 Remix 那樣的伺服器端渲染架構，您可能會在頁面載入時遇到一些捲軸快閃。這是因為 React Router 無法在您的 JS 程式包下載、資料載入以及整個頁面完成渲染之前還原捲軸位置（如果您正在渲染旋轉指示器，視窗大小可能與儲存捲軸位置時不一樣）。

伺服器端渲染架構可以防止捲軸快閃，因為它們可以在載入時傳送一個完全成形的文件，因此在頁面首次渲染時就可以還原捲軸。