useRevalidator

此钩子允许您出于任何原因重新验证数据。React Router 在调用操作后会自动重新验证数据，但您可能希望出于其他原因重新验证，例如当焦点返回到窗口时。

此功能仅在使用数据路由器时有效，请参阅 选择路由器

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() 时，会自动处理竞争条件。

如果在重新验证正在进行时发生导航，则重新验证将被取消，并且将从下一个页面的所有加载器中请求新数据。