react路由器dom和react with typescript中的类型错误

Question

我是react with typescript的初学者，在下面的代码中面临问题

下面是仪表板组件的代码

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中的TypeScript错误。tsx（18,51）：

没有重载匹配此调用。

重载1 of 2，'（props： ReadOnly）： Road'，给出以下错误。键入{Dashboard： string；}不能分配给键入'ComponentClass|FunctionComponent|ComponentClass，任何

键入“{Dashboard:string；}”不可分配给类型“FunctionComponent”

重载2/2'（道具：RouteProps，上下文？：any）：Route'给出了以下错误。键入“{Dashboard:string；}”不可分配给“ComponentClass | FunctionComponent | ComponentClass”类型，任何

键入“{Dashboard:string；}”不可分配给类型“FunctionComponent”

16 |       <div>
17 |         <Switch>

18 | | ^ "

Answer 1

您似乎没有为组件指定类型（仪表板和登录）。

您需要执行与下面的组件声明图像类似的操作，其中您将组件的类型设置为React。FC导入React库后。（FC代表功能组件，因为我们不使用基于类的组件模型）