[解決済み] React Router - バージョン更新後のwithRouterでTypescriptエラーが発生する。

質問

Reactアプリを以下のようにアップグレードしました。

react-router - 4.0.19 → 4.0.20

react - 16.0.30 から 16.0.34

typescript- バージョン "2.7.0-insiders.20180108"。

私のアプリでは、'withRouter' を使用しているところではどこでも、不可解な Typescript エラーが発生するようになりました。私は、それを動作させるために、すべてのインターフェースプロパティを 'any' に置き換えました。

import * as React from 'react';
import { Switch, Route, withRouter} from 'react-router-dom';
import { Login } from './Login';
import { connect } from 'react-redux';
import { RootAction, RootState } from './_redux';

class MainForm extends React.Component<any> {

  constructor(props: any) {
    super(props);
  }

  render() {

    return (
      <Switch>
        <Route exact={true} path="/" component={Login}/>
        <Route  path="/accounts" component={AccountsView}/>
      </Switch> 
    );
  }
}

const mapStateToProps = (state: RootState) => ({
  state
});

export const Main = withRouter(connect(mapStateToProps)(MainForm);

error TS2345: Argument of type 'ComponentClass> & {. WrappedComponent: ComponentType; }' に代入できません。 タイプのパラメータ 'ComponentType>'です。 タイプ 'ComponentClass> & { WrappedComponent: ComponentType; }' は、以下の型に割り当てることができません。 'StatelessComponent>'です。 タイプ 'ComponentClass> & { WrappedComponent: ComponentType; }' は、シグネチャ '(props.)' にマッチしません。 RouteComponentProps & { children? ReactNode; }, context?: any): ReactElement | null' です。

最後の行を次のように変換すると:

export const Main = connect(mapStateToProps)(MainForm);

エラーは出ないのですが、マジで悔しいです。 ありがとうございます。

EDIT に変更しました。

export const Main = connect(mapStateToProps)(withRouter(MainForm));

のように、Mayank Shuklaが提案した。しかし、今はエラーが発生する。

エラー TS2345: 'ComponentClass>' タイプの引数は タイプのパラメータに割り当てられない。RootState; } & DispatchProp>'です。 タイプ 'ComponentClass>' は は、'StatelessComponent<{ 状態' に割り当てられません。RootState; } & DispatchProp>' に割り当てられません。 タイプ 'ComponentClass>' は、シグネチャ '(props: { state: RootState; } & DispatchProp & {」というシグネチャにマッチしません。 children? ReactNode; }, context?: any): ReactElement | null' です。

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

TypeScript 2.6にアップグレードしたところ、同じ問題が発生しました。

を使って何とか解決しました。 RouteComponentProps .

URLの場合 http://localhost:8080/your-component/abc とルート

<Route component={YourComponent} path="/your-component/:param1?" />

コンポーネントは次のようになります。

import * as React from 'react'
import { withRouter } from 'react-router-dom';
import {RouteComponentProps} from "react-router";

// Type whatever you expect in 'this.props.match.params.*'
type PathParamsType = {
    param1: string,
}

// Your component own properties
type PropsType = RouteComponentProps<PathParamsType> & {
    someString: string,
}

class YourComponent extends React.Component<PropsType> {
    render() {

        console.log(this.props); // Prints all props including routing-related
        console.log(this.props.match.params.param1); // Prints 'abc'
        console.log(typeof this.props.match.params.param1 === 'string'); // prints 'true'

        return <div>...</div>;
    }
}

export default withRouter(YourComponent);