React Router v6+TS中Location、NavigateFunction无导出成员问题

• 类型导入路径错误：react-router-dom v6 的核心路由类型没有在包入口直接暴露，Location、NavigateFunction这类基础类型实际定义在其底层依赖react-router中，直接从react-router-dom导入会触发“不是导出成员”的TS报错。
• TypeScript版本不兼容：你当前使用的TypeScript 3.0.1版本过旧，react-router-dom v6 要求最低TypeScript版本为4.1，低版本TS无法正确解析包内的类型声明文件，会加剧类型识别异常。

1. 先升级TypeScript到兼容版本，执行对应包管理命令即可：

# npm
npm install typescript@^4.9.5 --save-dev

# yarn
yarn add typescript@^4.9.5 -D

# pnpm
pnpm add typescript@^4.9.5 -D

2. 修正类型导入路径，核心路由类型从react-router导入即可，该包是react-router-dom的自带依赖，无需额外手动安装。TS 4.5+ 推荐使用import type语法导入纯类型，避免无意义的运行时引入。
   修正后的完整代码如下：

import type { Location, NavigateFunction } from "react-router";
import { useLocation, useNavigate } from "react-router-dom";

const myRedirectCallback = (location: Location, navFunc: NavigateFunction) => () => {
  // 编写跳转前的自定义逻辑，比如埋点上报、权限校验、参数处理等
  if (location.pathname !== "/home") {
    navFunc("/home");
  }
};

const MyComponent = () => {
  const location = useLocation();
  const navFunc = useNavigate();
  const onClick = myRedirectCallback(location, navFunc);

  return <div onClick={onClick}>Click me!</div>;
};

如果不想记忆类型的导出路径，可以直接用TypeScript内置的ReturnType工具类型推导hooks的返回值类型，完全不需要手动导入对应类型，后续就算react-router调整类型导出路径也不需要修改业务代码：

import { useLocation, useNavigate } from "react-router-dom";

const myRedirectCallback = (
  location: ReturnType<typeof useLocation>,
  navFunc: ReturnType<typeof useNavigate>
) => () => {
  // 自定义跳转逻辑
};

const MyComponent = () => {
  const location = useLocation();
  const navFunc = useNavigate();
  const onClick = myRedirectCallback(location, navFunc);

  return <div onClick={onClick}>Click me!</div>;
};

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