React TypeScriptどのように配列をルートにバインドするのですか？

Question

私はstandart VisualStudio 2017 ASP.NET Core 2.0 React Templateを使用します。 私はテンプレートからクラスHomeを持っている：

import { RouteComponentProps } from 'react-router'; 

export class Home extends React.Component<RouteComponentProps<{}>, {}> { 
    public render() { 
     return <div> 
      <h1>Hello, world!</h1> 
     </div>; 
    } 
} 

私はroutesData配列を作ると「レイアウト」路線へHomeのようなコンポーネントをバインドする必要があります。ここに私の試しコードがあります：

interface RouteDataItem { 
    path: string; 
    exact: boolean; 
    main:() => Element; 
} 

export const routesData = [ 
    { 
     path: '/', 
     exact: true, 
     main:() => <Home /> 
    }, 
    { 
     path: '/counter', 
     main:() => <Counter /> 
    }, 
    { 
     path: '/fetchdata', 
     main:() => <FetchData /> 
    } 
] 

export const routes = <Layout> 
    {routesData.map((route, index) => { 
     return <Route exact={route.exact} key={index} path={route.path} component={route.main} />; 
    }} 
</Layout>; 

どうすればいいですか？ VisualStudioのは、エラーこの行のProperty "match" is absent in type "{}"

main:() => <Home /> 

<Home />が赤い下線である私を示しています。

Answer 1

ご自宅のコンポーネントがRouteComponentPropsをuseingされているため、[OK]をVisual StudioでRouteComponentProps