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

发布于01月26日

我只是想把我的React应用升级到

react 路由-4.0.19至4.0.20

react -16.0.30至16.0.34

typescript-版本"2.7.0-insiders.20180108"

在我的应用程序中，无论我在哪里使用"withRouter"，我现在都会遇到晦涩的打字错误.我甚至用"any"替换了所有界面props ，只是想让它工作起来.

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; }' is not assignable to parameter of type 'ComponentType>'. Type 'ComponentClass> & { WrappedComponent: ComponentType; }' is not assignable to type 'StatelessComponent>'. Type 'ComponentClass> & { WrappedComponent: ComponentType; }' provides no match for the signature '(props: RouteComponentProps & { children?: ReactNode; }, context?: any): ReactElement | null'.

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

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

我没有错误.我在这里非常沮丧.

EDIT，我改成

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

就像Mayank Shukla建议的那样.但现在，我们来看看错误:

error TS2345: Argument of type 'ComponentClass>' is not assignable to parameter of type 'ComponentType<{ state: RootState; } & DispatchProp>'. Type 'ComponentClass>' is not assignable to type 'StatelessComponent<{ state: RootState; } & DispatchProp>'. Type 'ComponentClass>' provides no match for the signature '(props: { state: RootState; } & DispatchProp & { children?: ReactNode; }, context?: any): ReactElement | null'.

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

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

推荐答案

Typescript相关问答推荐

如何在同一页面中使用布局和提供程序？

如何防止TypeScript允许重新分配NTFS？

node—redis：如何在redis timeSeries上查询argmin？

是否可以根据嵌套属性来更改接口中属性的类型？

角形标题大小写所有单词除外

对扩展某种类型的属性子集进行操作的函数

如何按不能保证的功能过滤按键？

类型脚本基于数组作为泛型参数展开类型

如何使默认导出与CommonJS兼容

分解对象时出现打字错误

React router 6(数据路由)使用数据重定向

判断映射类型内的键值的条件类型

为什么&Quot；元素隐式具有'；Any'；类型，因为...即使我已经打字了，也不能作为索引显示错误吗？

使用Type脚本更新对象属性

必需的输入()参数仍然发出&没有初始值设定项&q；错误

如何键入对象转换器

导航链接不触发自定义挂钩

如何为对象数组中的每个条目推断不同的泛型

使用NextJS中间件重定向，特定页面除外

为什么 TypeScript 类型条件会影响其分支的结果？