route.component 没有任何构造或调用签名 - 使用 TypeScript 的 React Router

Posted 2023-02-22

【中文标题】route.component 没有任何构造或调用签名 - 使用 TypeScript 的 React Router

【英文标题】：route.component does not have any construct or call signatures - React Router with TypeScript

【发布时间】：2021-06-09 10:58:15

【问题描述】：

路由是从对象列表构建的。但是打字稿突出了错误：

（属性）IRoute.component：React.ReactNode JSX 元素类型“route.component”没有任何构造或调用签名。

在纯 javascript 中，一切都很好。如何修复 TypeScript 错误？

import React from 'react'
import 
  HashRouter as Router,
  Route,
  Switch,
  Redirect,
  RouteComponentProps,
 from 'react-router-dom'

import  ReduxType  from '../container/Container'
import ThemeWrapper from './ThemeWrapper'
import ErrorWrapper from './ErrorWrapper'
import NotifyWrapper from './NotifyWrapper'
import mainPage from './mainLayout/views/Page'
import requestsPage from './requestsLayout/views/Page'
import palettePage from './paletteLayout/views/Page'

interface IRoute 
  key?: number
  path: string
  component: React.ReactNode
  exact: boolean


interface IRouteList extends Array<IRoute> 

const routeList: IRouteList = [
  // path: '', component: React.ReactNode, [exact]
   path: '/', component: mainPage, exact: true ,
   path: '/requests', component: requestsPage, exact: true ,
   path: '/palette', component: palettePage, exact: true ,
]

//const AppRouter = (): JSX.Element => 
class AppRouter extends React.Component<ReduxType, any> 
  public render() 
    console.log('AppRouter:' + JSON.stringify(this.props))
    return (
      <ThemeWrapper palette=this.props.palette>
        <ErrorWrapper>
          <NotifyWrapper>
            <Router>
              <Switch>
                routeList.map((route, i) => (
                  <Route
                    key=i
                    render=(props: RouteComponentProps<>) => (
                      <route.component ...this.props />
                    )
                    path=route.path
                    exact=route.exact
                  />
                ))
                <Redirect to="/" />
              </Switch>
            </Router>
          </NotifyWrapper>
        </ErrorWrapper>
      </ThemeWrapper>
    )
  


export default AppRouter

【参考方案1】：

您应该使用 ComponentType 来定义 React 组件类型，而不是 ReactNode。

interface IRoute 
  key?: number
  path: string
  component: React.ComponentType // HERE
  exact: boolean

---

下面是ReactNode的定义：

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

非常适合用于react "children"。

---

还有，这里是ComponentType：

type ComponentType<P = > = ComponentClass<P> | FunctionComponent<P>;

专门用于组件 - 函数和类。

---

错误：

XYZ 没有任何构造或调用签名

上述错误试图提示您当前类型，即“ReactNode”没有 React Components (ComponentType) 中需要（并且存在）的“构造函数”。

这是一个很好的 React-TypeScript 备忘单：https://github.com/typescript-cheatsheets/react

【讨论】：

非常感谢。您的回答帮助修复了错误