javascript - 将路由参数传递给组件

Question

我想在我的路由常量中添加一个组件：

export const routes = <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter' component={ Counter } />
    <Route path='/fetchdata' component={ FetchData } />
</Layout>;

组件计数器

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

    interface CounterState {
        currentCount: number;
    }

        export class Counter extends React.Component<RouteComponentProps<{}>, CounterState> {
            constructor(props: RouteComponentProps<{}>) {
                super(props);
                this.state = { currentCount: 0 };
            } 
        ....

所以我收到此错误消息：

[at-loader] 中的错误 ./ClientApp/routes.tsx:10:28 TS2326：属性“组件”的类型不兼容。类型“typeof Counter”不可分配给类型“StatelessComponent | 未定义> | 组件类 | 未定义>'。参数 'props' 和 'props' 的类型不兼容。键入'RouteComponentProps | undefined' 不可分配给类型 'RouteComponentProps<{}>'。类型“未定义”不可分配给类型“RouteComponentProps<{}>”。

那么我该如何解决这个问题呢？

标签： javascriptreactjstypescriptroutingtsx