反应路由器中 location.state 的类型或接口

Question

在一个组件中，有一个<Link>（来自 react-router-dom）在 state 属性中传递一个对象。

调用的另一个组件ReceiverComponent是正确接收该对象。但是，下面的代码抱怨消息：

类型“PoorMansUnknown”不可分配给类型“locationStateProps”。类型 'undefined' 不可分配给类型 'locationStateProps'.ts(2322)

type locationStateProps = {
  name: string;
}

function ReceiverComponent() {
  const location = useLocation();
  const myState: locationStateProps = location.state;
  return (
    <div>
      {myState.name}
    </div>
  );
}

我需要以某种方式为状态提供一种类型，而不会出现此错误。如何进行？

Answer 1

您还可以构建自己的状态接口并将其转换为它：

interface CustomState {
  ...
}

const location = useLocation()
const state = location.state as CustomState

Answer 2

Github 上有一个关于这个问题的帖子。

我实现了线程中提到的这个解决方案并且它有效。

interface Props extends RouteComponentProps<
  { myParamProp?: string }, // props.match.params.myParamProp
  any, // history
  { myStateProp?: string }, // props.location.state.myStateProp
> {
  myNormalProp: boolean;
}