TypeScript报错：react-router-dom <Link />传递state时类型不匹配

问题根因 #

你当前使用的是react-router-dom@5.x版本，对应类型定义包@types/react-router-dom@5.x默认要求Link组件的state参数显式声明类型，未做类型声明的自定义state会触发类型不匹配报错。

解决方案 #

1. 快速临时修复 #

适合临时调试场景，直接给state加as any强制忽略类型校验：

<Link 
  to={{
    pathname: "/跳转目标路由",
    state: { id: 1, name: "测试" } as any
  }}
>
  跳转按钮
</Link>

注意：该方案会丢失类型校验能力，不推荐长期生产环境使用。

2. 全局类型扩展（推荐长期使用） #

在项目全局类型声明文件（如react-app-env.d.ts或自定义的typings.d.ts）中扩展react-router的默认state类型，一劳永逸解决所有同类报错：

import "react-router";

declare module "react-router" {
  export interface LocationState {
    // 支持任意自定义key的state
    [key: string]: any;
    // 也可按需添加业务通用固定字段的类型约束，比如：
    // userId?: number;
    // userName?: string;
  }
}

配置后所有Link组件的state默认支持任意自定义字段，不会再触发类型报错，也可根据业务需要添加固定字段的类型校验。

3. 单场景精准类型约束 #

如果需要针对单个跳转场景做严格类型校验，可以单独给to属性指定泛型：

import { LocationDescriptor } from "react-router";

// 声明当前跳转的state类型
type CustomJumpState = {
  id: number;
  name: string;
};

// 给to对象指定泛型
const jumpConfig: LocationDescriptor<CustomJumpState> = {
  pathname: "/目标路由",
  state: { id: 123, name: "测试数据" }
};

// 使用
<Link to={jumpConfig}>跳转</Link>

目标页接收state的类型处理 #

接收跳转参数时，也可以给useLocation指定泛型获得类型提示：

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

// 复用之前声明的CustomJumpState类型
const location = useLocation<CustomJumpState>();
// 读取state时会自动有类型提示和校验
console.log(location.state?.id);

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