useRevalidator

這個 hook 讓你因為任何原因，重新驗證資料。React Router 會在呼叫 action 之後自動重新驗證資料，但你可能希望因為其他原因重新驗證，例如當焦點回到視窗時。

這個功能僅在使用資料導程器時有效，請參閱 選擇一個導程器

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

function WindowFocusRevalidator() {
  let revalidator = useRevalidator();

  useFakeWindowFocus(() => {
    revalidator.revalidate();
  });

  return (
    <div hidden={revalidator.state === "idle"}>
      Revalidating...
    </div>
  );
}

再次強調，在絕大多數情況下，React Router 已經自動重新驗證頁面上的資料，因此很少需要這個功能。如果你發現自己在使用它對資料執行正常的 CRUD 作業以回應使用者的互動，你可能沒有利用其他 API，例如 <Form>、useSubmit 或 useFetcher，而這些 API 會自動執行這個動作。

revalidator.state

告訴你重新驗證的狀態，可能是 "idle" 或 "loading"。

這對於建立載入指標和旋轉圖示很有用，可以讓使用者知道應用程式正在運算中。

revalidator.revalidate()

這會啟動重新驗證。

function useLivePageData() {
  let revalidator = useRevalidator();
  let interval = useInterval(5000);

  useEffect(() => {
    if (revalidator.state === "idle") {
      revalidator.revalidate();
    }
  }, [interval]);
}

備註

雖然你可以在同時呈現 useRevalidator 的多個執行個體，但它底層只有一個。這意味著當呼叫一個 revalidator.revalidate() 時，所有執行個體都會同步進入「loading」狀態（或更確切地說，它們都會更新以報告單一狀態）。

當重新驗證進行中時，呼叫 revalidate() 時，競爭狀況會自動處理。

如果在重新驗證過程中發生導航，重新驗證將會取消，而且會為下個頁面要求所有 loader 提供最新資料。