在 react-router-dom 中输入错误并使用 typescript 做出反应答案

【问题标题】：type error in react-router-dom and react with typescript在 react-router-dom 中输入错误并使用 typescript 做出反应
【发布时间】：2020-07-24 01:58:58
【问题描述】：

我是打字稿的初学者，在以下代码中遇到问题

这是仪表板组件的代码

export default function Dashboard() {
return(
  <p>Dashboard page</p>
 )
 }

这是路线代码

const AppRouter = () => {
  return (
    <Router history={history}>
      <div>
        <Switch>
          <Route path={"/dashboard" } component={Dashboard} />

          <Route path="/" component={Login} />
        </Switch>
      </div>
    </Router>
  );
};

export default AppRouter;

在路线代码中，我面临类型问题，即

E:/Web/src/router/route.tsx(18,51) 中的 TypeScript 错误：

没有重载匹配这个调用。

重载 1 of 2, '(props: Readonly): Route', 给出了以下错误。键入'{仪表板：字符串； }' 不可分配给类型 'ComponentClass |功能组件 |组件类，任意> |函数组件<...> |未定义'。

键入'{仪表板：字符串； }' 不可分配给类型 'FunctionComponent>'。键入'{仪表板：字符串； }' 为签名 '(props: PropsWithChildren>, context?: any): ReactElement<...> | 提供不匹配空'。

Overload 2 of 2, '(props: RouteProps, context?: any): Route'，给出以下错误。键入'{仪表板：字符串； }' 不可分配给类型 'ComponentClass |FunctionComponent |组件类，任意> |函数组件<...> |未定义'。

键入'{仪表板：字符串； }' 不可分配给类型 'FunctionComponent>'。 TS2769

16 |       <div>
17 |         <Switch>

18 | | ^ "

【问题讨论】：

你是否从两个文件中的“react”中导入了 React？
是的，我在两个文件中都导入了 react

标签： reactjs typescript react-redux typescript-typings react-router-dom

【解决方案1】：

您似乎没有为组件指定类型（dashboard 和 login）。

您需要执行类似于以下组件声明图像的操作，在导入 React 库后将组件的类型设置为React.FC。（FC代表Functional Component，因为我们没有使用基于类的组件模型）

组件图像

【讨论】：