web-dev-qa-db-ja.com

react-routerのlocation.stateのタイプまたはインターフェース

1つのコンポーネントには、<Link>（react-router-domから）オブジェクトを状態プロパティに渡します。

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>
  );
}

このエラーなしで、何らかの方法で状態のタイプを提供する必要があります。どうやって進める？

reactjstypescriptreact-routerreact-router-dom
4
fjplaurr

この問題について、Githubに thread が公開されています。

私はスレッドで言及されたこのソリューションを実装しましたが、うまくいきました。

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