react-router-dom TypeScript TS2322：类型'typeof Index'不可分配给类型

Posted 2023-02-22

【中文标题】react-router-dom TypeScript TS2322：类型\'typeof Index\'不可分配给类型

【英文标题】：react-router-dom TypeScript TS2322: Type 'typeof Index' is not assignable to typereact-router-dom TypeScript TS2322：类型'typeof Index'不可分配给类型

【发布时间】：2017-09-25 21:55:32

【问题描述】：

我在使用 react-router-dom 的主要 React 组件中遇到了很多相同的 TypeScritp 错误。所有子组件都返回错误：

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>'.

我的 Main.tsx 组件看起来像这样（所有其他 components.tsx 似乎编译没有问题）：

import * as React from 'react';
import  BrowserRouter as Router, Route, Switch from 'react-router-dom';

import Index from './Index';
import Explore from './Explore';
import NotFound from './NotFound';

class Main extends React.Component<,> 

  render () 

    return (
      <Router>
          <Switch>
            <Route path="/" exact=true component=Index />
            <Route path="/explore/things/:id" component=Explore />
            <Route component=NotFound />
          </Switch>
      </Router>
    )

  


export default Main;

谁能提供一些线索？

【参考方案1】：

这修复了编译错误（但会造成 tslint 违规）

<Route path="/" exact=true component=Index as any /> <Route path="/explore/things/:id" component=Explore as any />

【讨论】：

太棒了，谢谢！您能否详细说明为什么这是必要的？

是的，如果有人可以解释为什么这可以解决问题？甚至我也遇到了这个问题，并且按照 Nicholas Albion 的建议解决了

如果你使用的是component 属性，那么你的组件属性只需要继承RouteComponentProps。如果可以以任何方式避免，请不要这样做。

我这几天一直在寻找解决方案。谢谢！

不过，我没有遇到 linter 问题，而且我的 linting 规则非常严格。

【参考方案2】：

我是这样做的

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, > ...

【参考方案3】：

这可以通过箭头函数调用 Route 组件并使用扩展传递 props: any 来解决：

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

这个方法很好，因为它允许你将额外的 props user_role 传递给 React 路由器子组件。

---

另外，更改 @types/react-router-dom 定义似乎可以消除错误：

interface RouteProps 
    ...
    //component?: React.SFC<RouteComponentProps<any> | void> | React.ComponentClass<RouteComponentProps<any> | void>;
    component?: any;

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