React Router - 更新版本后 withRouter 上的 Typescript 错误

Question

我刚刚尝试将我的 React 应用程序升级到

反应路由器 - 4.0.19 到 4.0.20

反应 - 16.0.30 到 16.0.34

打字稿-版本“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);

错误 TS2345：类型参数 ‘ComponentClass> & { WrappedComponent: ComponentType; }’ 不可分配给“ComponentType>”类型的参数。类型 ‘ComponentClass> & { WrappedComponent: ComponentType; }’ 不可分配给类型 ‘StatelessComponent>‘。类型 ‘ComponentClass> & { WrappedComponent: ComponentType; }’ 没有为签名提供匹配 ‘(props: RouteComponentProps & { children?: ReactNode; }, context?: any): ReactElement |无效的’。

如果我将最后一行转换为：

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

我没有收到错误。在这里严重沮丧。谢谢

编辑，我改为

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

就像 Mayank Shukla 建议的那样。但现在得到错误：

错误 TS2345：’ComponentClass>’ 类型的参数不可分配给’ComponentType<{ state: RootState; 类型的参数； } & DispatchProp>‘。类型 ‘ComponentClass>’ 不可分配给类型 ‘StatelessComponent<{ state: RootState; } & DispatchProp>‘。类型 ‘ComponentClass>’ 不提供签名匹配 ‘(props: { state: RootState; } & DispatchProp & { children?: ReactNode; }, context?: any): ReactElement |无效的’。

原文由 29er 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我刚刚升级到 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);

原文由 Pavel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我必须这样解决：

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

interface IProps extends RouteComponentProps<any> {
  title: string;
}

class MyComp extends React.Component<IProps> {
    public render(){
        return (
           <h1>{this.props.title}</h1>
        )
    }
}

export default withRouter<IProps>(MyComp);

原文由 jakobdo 发布，翻译遵循 CC BY-SA 4.0 许可协议