Function useHistoryBlocker

useHistoryBlocker(blocker?): HistoryTransaction | null

Registers a blocker that prevents history navigation.

Parameters

Optionalblocker: boolean | HistoryBlocker
A history navigation blocker or a boolean that indicates whether blocker is blocked or not.

Returns HistoryTransaction | null

A pending navigation transaction that must be cancelled or proceeded. Or null if there's no blocked navigation transaction.

Example

useHistoryBlocker(transaction => {
  return hasUnsavedChanges && !confirm('Discard unsaved changes?')
});

Example

useHistoryBlocker(transaction => {
  if (!hasUnsavedChanges) {
    // No unsaved changes, proceed with navigation
    transaction.proceed();
    return;
  }

  if (!confirm('Discard unsaved changes?')) {
    // User decided to keep unsaved changes
    transaction.cancel();
  }
});

Example

const transaction = useHistoryBlocker(() => hasUnsavedChanges);
// or
const transaction = useHistoryBlocker(hasUnsavedChanges);
// or
const transaction = useHistoryBlocker();

transaction && (
  <dialog open={true}>
    <p>{'Discard unsaved changes?'}</p>

    <button onClick={transaction.proceed}>{'Discard'}</button>
    <button onClick={transaction.cancel}>{'Cancel'}</button>
  </dialog>
)