TypeScript中使用history.push传递state出现类型报错如何解决？

这个类型报错通常出现在react-router v6版本环境中，v6已经废弃了原有的useHistory API，替换为useNavigate，原PartialPath类型定义里确实移除了state属性的声明，如果你强行沿用v5的useHistory写法就会触发该校验错误。

方案1：改用v6官方推荐的useNavigate写法（最优解） #

路由跳转代码调整： #

import { useNavigate } from 'react-router-dom'

const navigate = useNavigate()
// 第一个参数传路径，第二个参数配置对象里放state
navigate('/someurl/', {
  state: {
    foo: bar
  }
})

下一路由接收state时添加类型定义： #

import { useLocation } from 'react-router-dom'

// 自定义state的类型，替换为实际业务字段和对应类型
type RouteState = {
  foo: typeof bar
}

// 给useLocation传入泛型指定state类型
const { state } = useLocation<RouteState>()
// 此时state.foo会有正确的类型提示

方案2：如果你仍在使用react-router v5 #

是因为调用useHistory时没有传入状态泛型导致类型不匹配，调整写法如下：

import { useHistory } from 'react-router-dom'

type HistoryState = {
  foo: typeof bar
}

// 给useHistory传入状态泛型
const history = useHistory<HistoryState>()
history.push({
  pathname: '/someurl/',
  state: {
    foo: bar
  }
})

临时兜底方案（不推荐） #

如果需要快速修复校验问题不想改动原有逻辑，可以用类型断言跳过校验：

import { To } from 'react-router-dom'

history.push({
  pathname: '/someurl/',
  state: {
    foo: bar
  }
} as To)

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