Reactjs 反应路由器dom类型脚本TS2322:类型';索引类型';不可分配给类型

Reactjs 反应路由器dom类型脚本TS2322:类型';索引类型';不可分配给类型,reactjs,typescript,react-router-dom,Reactjs,Typescript,React Router Dom,我在使用React路由器dom的主要React组件中遇到了很多相同的TypeScriptp错误。所有子组件都返回错误: error TS2322: Type 'typeof NotFound' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'. Typ

我在使用React路由器dom的主要React组件中遇到了很多相同的TypeScriptp错误。所有子组件都返回错误:

error TS2322: Type 'typeof NotFound' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'typeof NotFound' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'void | RouteComponentProps<any> | undefined' is not assignable to type '{} | undefined'.
        Type 'void' is not assignable to type '{} | undefined'.


error TS2322: Type 'typeof Index' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> | ComponentClass<void | RouteComponentProps<a...'.
  Type 'typeof Index' is not assignable to type 'ComponentClass<void | RouteComponentProps<any>>'.
    Type 'Index' is not assignable to type 'Component<void | RouteComponentProps<any>, ComponentState>'.
      Types of property 'props' are incompatible.
        Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type '(Readonly<{ children?: ReactNode; }> & void) | (Readonly<{ children?: ReactNode; }> & Readonly<Ro...'.
          Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<any>>'.
            Type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>' is not assignable to type 'Readonly<RouteComponentProps<any>>'.
              Property 'match' is missing in type 'Readonly<{ children?: ReactNode; }> & Readonly<Props>'.

错误TS2322:Type'typeof NotFound'不可分配给Type'StatelessComponent | ComponentClass这可以通过通过箭头函数调用路由组件并传递带有排列的
props:any
来解决:

<Route 
  path="/explore/things/:id"
  component={(props: any)=>
    <Explore {...props} user_role={this.state.user_role} />
  } />

但这似乎不是一个很好的解决方案。

这修复了编译错误(但创建了tslint冲突)


我就是这样做的

import { RouteComponentProps } from 'react-router-dom';

class Index extends React.Component<RouteComponentProps<any>, {}> {...}
从“react router dom”导入{RouteComponentProps};
类索引扩展了React.Component{…}

从“react router dom”导入{RouteComponentProps};
接口属性扩展了RouteComponentProps{…}
类索引扩展了React.Component{…}

太棒了,谢谢!你能详细解释一下为什么这是必要的吗?是的,如果有人能解释为什么这可以解决问题?即使是我也遇到了这个问题,并且按照Nicholas Albioni的建议解决了这个问题。如果您使用的是
组件
道具,那么您的组件道具只需要继承
路由组件道具
。如果你能以任何方式避免,就不要这样做。我已经为这个问题寻找解决方案好几天了。非常感谢。不过,我没有遇到皮棉的问题,而且我的皮棉规则非常严格。
interface RouteProps {
    ...
    //component?: React.SFC<RouteComponentProps<any> | void> | React.ComponentClass<RouteComponentProps<any> | void>;
    component?: any;
import { RouteComponentProps } from 'react-router-dom';

class Index extends React.Component<RouteComponentProps<any>, {}> {...}
import { RouteComponentProps } from 'react-router-dom';

interface Props extends RouteComponentProps<any> {...}
class Index extends React.Component<Props, {}> {...}