useBlocker

useBlocker

useBlocker 钩子允许您阻止用户离开当前位置，并向他们显示自定义 UI 以允许他们确认导航。

这仅适用于 React Router 应用程序内的客户端导航，不会阻止文档请求。要阻止文档导航，您需要添加自己的 beforeunload 事件处理程序。

阻止用户导航有点反模式，因此请仔细考虑此钩子的任何用法并谨慎使用。在防止用户离开半填表单的实际用例中，您可以考虑将未保存的状态保留到sessionStorage，并在他们返回时自动重新填充，而不是阻止他们离开。

function ImportantForm() {
  const [value, setValue] = React.useState("");

  // Block navigating elsewhere when data has been entered into the input
  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      value !== "" &&
      currentLocation.pathname !== nextLocation.pathname
  );

  return (
    <Form method="post">
      <label>
        Enter some important data:
        <input
          name="data"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </label>
      <button type="submit">Save</button>

      {blocker.state === "blocked" ? (
        <div>
          <p>Are you sure you want to leave?</p>
          <button onClick={() => blocker.proceed()}>
            Proceed
          </button>
          <button onClick={() => blocker.reset()}>
            Cancel
          </button>
        </div>
      ) : null}
    </Form>
  );
}

有关更完整的示例，请参阅存储库中的example。

特性

state

拦截器的当前状态

• unblocked - 拦截器处于空闲状态，未阻止任何导航
• blocked - 拦截器阻止了导航
• proceeding - 拦截器正在从被阻止的导航继续前进

location

当处于 blocked 状态时，这表示我们阻止导航到的位置。当处于 proceeding 状态时，这是在调用 blocker.proceed() 后导航到的位置。

方法

proceed()

当处于 blocked 状态时，您可以调用 blocker.proceed() 来继续前往阻塞的位置。

reset()

当处于 blocked 状态时，您可以调用 blocker.reset() 将阻止器返回到 unblocked 状态并让用户停留在当前位置。