Typescript 如何在reactrouterdom v6中捕获pop事件

navigator没有任何导航操作，例如按下、弹出、替换，但它具有go功能，可以在历史堆栈中向前/向后移动.navigator.go(-1)是goBack或反向导航的同义词.

/**
 * A Navigator is a "location changer"; it's how you get to different locations.
 *
 * Every history instance conforms to the Navigator interface, but the
 * distinction is useful primarily when it comes to the low-level <Router> API
 * where both the location and a navigator must be provided separately in order
 * to avoid "tearing" that may occur in a suspense-enabled app if the action
 * and/or location were to be read directly from the history instance.
 */
export interface Navigator {
  createHref: History["createHref"];
  // Optional for backwards-compat with Router/HistoryRouter usage (edge case)
  encodeLocation?: History["encodeLocation"];
  go: History["go"];
  push(to: To, state?: any, opts?: NavigateOptions): void;
  replace(to: To, state?: any, opts?: NavigateOptions): void;
}

您也可以增加go函数，如下所示:

import { useEffect } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';

function useConfirmExit(confirmExit: () => Promise<boolean>, when = true): void {
  const { navigator } = useContext(NavigationContext);

  useEffect(() => {
    if (!when) {
      return () => { };
    }

    const { go, push } = navigator;

    navigator.go = async (delta: number) => {
      const result = await confirmExit();
      if (result !== false) {
        console.log('Save to be invoked');
        go(delta);
      }
    };

    navigator.push = async (...args: Parameters<typeof push>) => {
      const result = await confirmExit();
      if (result !== false) {
        console.log('Save to be invoked');
        push(...args);
      }
    };
        
    return () => {
      navigator.go = go;
      navigator.push = push;
    };
  }, [navigator, confirmExit, when]);
}