react-router 中 location.state 的类型或接口

Question

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

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

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

type locationStateProps = {
  name: string;
}

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

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

Answer 1

在 Github 上有一个关于这个问题的 thread。

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

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

Answer 2

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

interface CustomState {
  ...
}

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

Answer 3

对于可能最终出现在这里的其他人......我正在使用 React Router v6，据我所知，它不再导出 RouteComponentProps（我安装了 @types/react-router 和 @types/react-router -dom - 我在DefinitelyTyped 文件中看到了类型定义，但没有从react-router-dom 导出）。

所以，Location 的输入方式，我发现自己无法以安抚 Typescript 的方式扩展它。不过……

我不推荐 as 强制转换，因为它会降低 TypeScript 的效率。好消息！您可以使用 is 而不是 as 来向 TypeScript 证明给定元素确实是您所说的那样。例如：

type LocationStateProps = {
  name: string;
}

function ReceiverComponent() {
  const location = useLocation();
  const myState = location.state;

  // note that you are defining the return type of this function using `is`
  const hasNameProps = (state: object | null | LocationStateProps): state is LocationStateProps => {
    // you use `as` here, but only so typescript doesn't yell at you while you access the property
    // specifically to test if it is there
    return (state as LocationStateProps).name !== undefined;
  }


  return (
    <div>
      {/**
       * Now you can check to see if the prop exists. If it does, us it confidently, and TypeScript won't
       * complain! But you're able to provide a fallback in case the value is, for some reason, not there.
       * If you as-cast, you lose that opportunity. It's a little verbose, but it preserves the benefit of
       * TypeScript... Type safety!
       */}
      {hasNameProps(myState) ? myState.name : "No Name"}
    </div>
  );
}

Answer 4

对我有用

   interface locationStateProps {
  from: { isEditing: string }
}
const NewPublication: React.FC<NewPublicationProps> = () => {
  const navigate = useNavigate();

  let location = useLocation();
  const myState: locationStateProps = location.state as locationStateProps;