Programmatic Navigation

Advanced Navigation Patterns

1. Navigation Guards

// Navigation guard hook
function useNavigationGuard(
  message = 'You have unsaved changes. Are you sure you want to leave?',
  when = true
) {
  const navigate = useNavigate();
  const [isBlocking, setIsBlocking] = useState(false);
  const [pendingNavigation, setPendingNavigation] = useState(null);
  
  useEffect(() => {
    if (!when) return;
    
    // Create navigation interceptor
    const unblock = window.onbeforeunload = (e) => {
      e.preventDefault();
      e.returnValue = message;
      return message;
    };
    
    return () => {
      window.onbeforeunload = null;
    };
  }, [when, message]);
  
  const confirmNavigation = () => {
    if (pendingNavigation) {
      const { to, options } = pendingNavigation;
      setPendingNavigation(null);
      setIsBlocking(false);
      navigate(to, options);
    }
  };
  
  const cancelNavigation = () => {
    setPendingNavigation(null);
    setIsBlocking(false);
  };
  
  const guardedNavigate = (to, options) => {
    if (when) {
      setIsBlocking(true);
      setPendingNavigation({ to, options });
    } else {
      navigate(to, options);
    }
  };
  
  return {
    isBlocking,
    confirmNavigation,
    cancelNavigation,
    guardedNavigate
  };
}

// Usage in a form component
function EditForm() {
  const [isDirty, setIsDirty] = useState(false);
  const {
    isBlocking,
    confirmNavigation,
    cancelNavigation,
    guardedNavigate
  } = useNavigationGuard(
    'You have unsaved changes. Do you want to discard them?',
    isDirty
  );
  
  const handleSave = async (data) => {
    try {
      await saveData(data);
      setIsDirty(false);
      guardedNavigate('/success');
    } catch (error) {
      // Handle error
    }
  };
  
  return (
    <div>
      <form onChange={() => setIsDirty(true)}>
        {/* Form fields */}
      </form>
      
      {isBlocking && (
        <Modal>
          <p>You have unsaved changes. Do you want to leave?</p>
          <button onClick={confirmNavigation}>Leave</button>
          <button onClick={cancelNavigation}>Stay</button>
        </Modal>
      )}
    </div>
  );
}

2. Navigation with Animation

// Animated navigation hook
function useAnimatedNavigation() {
  const navigate = useNavigate();
  const [isAnimating, setIsAnimating] = useState(false);
  
  const animatedNavigate = async (to, options = {}) => {
    setIsAnimating(true);
    
    // Start exit animation
    await new Promise(resolve => {
      document.body.classList.add('page-exit');
      setTimeout(resolve, 300); // Match CSS transition duration
    });
    
    // Navigate
    navigate(to, options);
    
    // Start enter animation
    await new Promise(resolve => {
      document.body.classList.remove('page-exit');
      document.body.classList.add('page-enter');
      setTimeout(() => {
        document.body.classList.remove('page-enter');
        setIsAnimating(false);
        resolve();
      }, 300);
    });
  };
  
  return { animatedNavigate, isAnimating };
}

// Usage component
function AnimatedLink({ to, children, ...props }) {
  const { animatedNavigate, isAnimating } = useAnimatedNavigation();
  
  const handleClick = (e) => {
    e.preventDefault();
    if (!isAnimating) {
      animatedNavigate(to);
    }
  };
  
  return (
    <a 
      href={to} 
      onClick={handleClick}
      className={isAnimating ? 'animating' : ''}
      {...props}
    >
      {children}
    </a>
  );
}

3. Navigation Queue

// Navigation queue for sequential navigation
function useNavigationQueue() {
  const navigate = useNavigate();
  const [queue, setQueue] = useState([]);
  const [isProcessing, setIsProcessing] = useState(false);
  
  const enqueueNavigation = (to, options = {}) => {
    setQueue(prev => [...prev, { to, options }]);
  };
  
  const processQueue = async () => {
    if (isProcessing || queue.length === 0) return;
    
    setIsProcessing(true);
    const { to, options } = queue[0];
    
    try {
      // Add any pre-navigation logic here
      await new Promise(resolve => setTimeout(resolve, 500));
      
      navigate(to, options);
      
      // Remove processed item
      setQueue(prev => prev.slice(1));
    } finally {
      setIsProcessing(false);
    }
  };
  
  useEffect(() => {
    processQueue();
  }, [queue, isProcessing]);
  
  return { enqueueNavigation, queueLength: queue.length };
}

// Usage example
function SequentialNavigator() {
  const { enqueueNavigation, queueLength } = useNavigationQueue();
  
  const navigateSequentially = () => {
    enqueueNavigation('/step1');
    enqueueNavigation('/step2', { state: { data: 'test' } });
    enqueueNavigation('/step3');
    enqueueNavigation('/complete', { replace: true });
  };
  
  return (
    <div>
      <button onClick={navigateSequentially}>
        Start Sequential Navigation
      </button>
      {queueLength > 0 && (
        <p>Navigation queue: {queueLength} remaining</p>
      )}
    </div>
  );
}