1. ホーム
  2. reactjs

[解決済み] propsでmatchオブジェクトを参照するには、どのようなTypeScriptの型を使用すればよいですか?

2022-12-14 14:08:53

質問

Reactのコンテナ/コンポーネントにおいて、どの型を使えば match 部分を参照するためにどのタイプを使用できますか?

interface Props {
  match: any // <= What could I use here instead of any?
}

export class ProductContainer extends React.Component<Props> {
  // ...
}

どのように解決するのですか?

明示的に追加する必要はありません。以下のように RouteComponentProps<P> から @types/react-router をプロップの基本インターフェースとして使用します。 P はマッチパラメータの型です。

import { RouteComponentProps } from 'react-router';

// example route
<Route path="/products/:name" component={ProductContainer} />

interface MatchParams {
    name: string;
}

interface Props extends RouteComponentProps<MatchParams> {
}

// from typings
import * as H from "history";

export interface RouteComponentProps<P> {
  match: match<P>;
  location: H.Location;
  history: H.History;
  staticContext?: any;
}

export interface match<P> {
  params: P;
  isExact: boolean;
  path: string;
  url: string;
}