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

Question

我只是尝试升级我的React应用程序

react-router - 4.0.19到4.0.20

反应 - 16.0.30至16.0.34

typescript- version"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 | 空值'.

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

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

Answer 3

以下是我通常如何构建我的类型化 React 组件：

// These props are provided when creating the component
interface OwnProps {
    // ...
}

// These props are provided via connecting the component to the store
interface StateProps {
    // ...
}

// These props are provided by the router
interface PathProps {
    // ...
}

class Component extends React.Component<OwnProps & StateProps & RouteComponentProps<PathProps>> {
    // ...
}

const mapStateToProps = (state: State, props: OwnProps): StateProps => ({
    // ...
});

export default withRouter(
    connect(mapStateToProps)(Component)
);

Answer 4

这是我使用的功能反应方法

import { RouteComponentProps } from "react-router";

interface Props extends RouteComponentProps {
    thing: Thing | false;
    onAction?: () => void;
}

export default withRouter(({ thing, onAction, history }: Props) => {