reactjs – react-router-dom TypeScript TS2322：类型’typeof

发布时间：2020-12-15 20:46:56 所属栏目：百科来源：网络整理

导读：我使用react-router-dom在我的主React组件中得到了相当多的TypeScritp错误.所有子组件都返回错误： error TS2322: Type 'typeof NotFound' is not assignable to type 'StatelessComponentvoid | RouteComponentPropsany | ComponentClassvoid | RouteCompon

我使用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;

任何人都可以提供一些线索吗？

这修复了编译错误(但是创建了一个tslint违规)

< Route path =“/”exact = {true} component = {Index as any} />< Route path =“/ explore / things /：id”component = {Explore as any} />

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!