如何封装React Router的NavigateFunction？

你的问题出在返回值类型理解错误：NavigateFunction是一个重载函数类型，不是对象类型，所以返回合并后的对象必然触发类型错误。

正确的做法是创建一个符合重载签名的单一函数，在函数内部判断参数类型，分别处理两种调用场景：

import { NavigateFunction, NavigateOptions, To, useNavigate } from "react-router-dom"

export function useNavigateCustom(): NavigateFunction {
  const navigate = useNavigate()

  // 定义符合NavigateFunction重载的函数
  const customNavigate: NavigateFunction = (
    arg: To | number,
    options?: NavigateOptions
  ) => {
    if (typeof arg === "number") {
      // 处理delta跳转的自定义逻辑
      navigate(arg)
    } else {
      // 处理路径跳转的自定义逻辑
      navigate(arg, options)
    }
  }

  return customNavigate
}

关键说明： #

• NavigateFunction的本质是一个支持两种调用方式的函数：要么传To类型参数+可选NavigateOptions，要么传number类型的delta值。
• 通过typeof arg === "number"区分两种调用场景，注入自定义逻辑后调用原navigate函数。
• 直接给customNavigate指定NavigateFunction类型，让TypeScript自动校验函数签名是否符合要求。

如果想用更严谨的TS重载语法，也可以这样实现：

import { NavigateFunction, NavigateOptions, To, useNavigate } from "react-router-dom"

export function useNavigateCustom(): NavigateFunction {
  const navigate = useNavigate()

  // 显式声明函数重载
  function customNavigate(to: To, options?: NavigateOptions): void
  function customNavigate(delta: number): void
  function customNavigate(arg: To | number, options?: NavigateOptions): void {
    if (typeof arg === "number") {
      // delta跳转自定义逻辑
      navigate(arg)
    } else {
      // 路径跳转自定义逻辑
      navigate(arg, options)
    }
  }

  return customNavigate as NavigateFunction
}

这种方式通过显式重载声明让函数调用签名更清晰，同样能满足NavigateFunction的类型要求。

内容的提问来源于stack exchange，提问作者Dusan