Debugging Navigation Blocking Issues

Present practical tips and code snippets for debugging common problems encountered while implementing navigation blocking, such as handling asynchronous conditions.

import { useNavigationBlocker } from 'tanstack-router-dom';

function useBlocker(when, message) {
  const blocker = useCallback((tx) => {
    if (window.confirm(message)) tx.retry();
  }, [message]);

  useNavigationBlocker(blocker, when);
}

This snippet shows how to implement a navigation blocker hook using TanStack Router. It defines a custom hook, useBlocker, that uses useNavigationBlocker from 'tanstack-router-dom' to conditionally display a confirmation dialog when the user attempts to navigate away from the current page. The blocker only activates based on the 'when' condition.

const MyComponent = () => {
  const [isFormDirty, setIsFormDirty] = useState(false);
  
  // Use the custom useBlocker hook to prevent navigation when the form is dirty
  useBlocker(isFormDirty, 'You have unsaved changes. Are you sure you want to leave?');

  return (
    <form>
      {/* Form content here */}
    </form>
  );
}

In this snippet, the custom useBlocker hook is utilized within a React component, MyComponent, to block navigation when a form is 'dirty' or has unsaved changes. It sets up the warning message that gets displayed if the user tries to navigate away with unsaved changes.