`useBlocker`

useBlocker 鉤子允許您阻止使用者離開目前的位置，並向他們呈現一個自訂的使用者介面，讓他們確認導覽。

這僅適用於您的 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>
  );
}

如需更完整的範例，請參閱存放庫中的範例。

屬性

`state`

阻止器的目前狀態

unblocked - 阻止器閒置，尚未阻止任何導覽
blocked - 阻止器已阻止導覽
proceeding - 阻止器正在從被阻止的導覽中進行

`location`

當處於 blocked 狀態時，這表示我們阻止導覽的位置。當處於 proceeding 狀態時，這是呼叫 blocker.proceed() 後要導覽到的位置。

方法

`proceed()`

當處於 blocked 狀態時，您可以呼叫 blocker.proceed() 來進行到被阻止的位置。

`reset()`

當處於 blocked 狀態時，您可以呼叫 blocker.reset() 將阻止器返回到 unblocked 狀態，並將使用者留在目前的位置。