Question

我使用标准版VisualStudio 2017 ASP.NET Core 2.0 React模板。我从模板中获得了课程Home：

import { RouteComponentProps } from 'react-router';

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

我需要制作routesData数组并将Home之类的组件绑定到＆＃39;布局＆＃39;路线。这是我的尝试代码：

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中添加<home />的属性，因为您的主要组件使用RouteComponentProps作为其属性

如果您按住Ctrl +单击visual studio中的RouteComponentProps，可以查看有关RouteComponentProps属性的更多信息

Answer 2

Typescript 无需传入函数即可识别 react.fc 类型。

您只需要传递组件名称，例如：

export const Home:React.FC = () => (
<Layout
  footer={false}
>
  Exampĺe
</Layout>
)

并在路由中传递组件

import React from 'react'
import Home from './Home/Home'

interface RouteDataItem {
    path?: string;
    name?: string;
    isProtected?: boolean;
    component?: React.FC;
}

 export const routes: RouteDataItem[] = [
  {
    path: '/',
    name: 'Feed',
    isProtected: true,
    component: Home
  }

]

和路由..

{routes.map((route) => (
          // eslint-disable-next-line react/jsx-key
          <Route path="/" exact={true} component={route.component} />
        ))}

React TypeScript如何将数组绑定到路由？

2 个答案: