web-dev-qa-db-ja.com

TypeScriptのようにreact-router引数を宣言するもの

TypeScriptを使用して、パラメーターを受け入れる方法でreact-routerをセットアップしようとしています。

私のrender要素に

<Route path="/show/:id" component={TestComp} />

そして、私はTestCompを次のように定義します

const TestComp = ({ match }) => (
    <div>
        <h2>Showing specified ID: {match.params.id}</h2>
    </div>
)

ただし、VS Codeはmatchパラメータに（TestCompの宣言で）下線を引いて教えてくれます

バインド要素 'match'は暗黙的に 'any'タイプを持っています。

コンパイルに失敗します。

どのタイプmatchを宣言する必要があるかを誰かに教えてもらえますか？私はRoutePropsを試しましたが、それもうまくいきません。 index.d.tsを見ると、match<P>として定義されていると思いますが、パラメーターをジェネリック型として宣言する方法がわかりません。

[〜＃〜]更新[〜＃〜]
@ TarasPolovyiの回答へのコメントに基づいて、以下を追加しました。

enter image description here

ご覧のとおり、これにはまだ問題があります。

reactjstypescriptreact-router
11
awj

react-router v4を使用している場合は、react-router-domからRouteComponentPropsをインポートし、タイプRouteComponentProps<RouteInfo>を使用します-引数名は一致する必要があります

11
Mahesh Bhuva

まず、react-router-domからmatchをインポートする必要があります。

これは、create react appから生成された私のコードのコピーです。

import {
    BrowserRouter as Router,
    Route,
    Link,
    match
} from 'react-router-dom';

次のようなインターフェースが必要です。

interface Identifiable {id: string; }

matchは必要なものです。このような：

const TestComp = (mathedRoute: match<Identifiable>) => (
    <div>
        <h2>Showing specified ID: {mathedRoute.params.id}</h2>
    </div>
)
6
Georgi Naumov

@types/react-routerの型宣言があるパッケージreact-routerをインストールする必要があります。インターフェースmatch<P>が含まれているため、それを使用してプロパティタイプを記述できます。

1
Taras Polovyi

TypeScriptとReact Router V 4.0を使用している場合、構文は異なります。ルートは次のように宣言します。

<Route path="/home/:topic?" render={() => {
   return this.renderView(<ContentHolder />);
}} />

次に、コンポーネントは次のように宣言されます。

interface RouteInfo {
    topic: string;
}

interface ComponentProps extends RouteComponentProps<RouteInfo> {
}

class ContentHolder extends Component<ComponentProps> {

    render() {
        return (
            <Content>
                <h1 className="page-title">{this.props.match.params.topic}</h1>
            </Content>
        );
    };
};

export default withRouter(ContentHolder);

次に、this.props.match.params VS CodeとIntelliJの両方でIntelliSenseを完全に利用できます

1
Raffaeu