带有动态地图路由器的打字稿出现类型错误

Question

使用 Typescript 和 react-router-dom。我声明了一个数组以在Switch 中动态生成Route 子代。但是得到了类型错误：

Conversion of type '{ routeMap: RouteProps<string, { [x: string]: string | undefined; }>[]; "": any; }' to type 'Switch' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type '{ routeMap: RouteProps<string, { [x: string]: string | undefined; }>[]; "": any; }' is missing the following properties from type 'Switch': context, setState, forceUpdate, render, and 3 more.

这是我的代码：

import { RouteProps, Switch, Redirect, Route } from 'react-router-dom'

export const routeMap: RouteProps[] = [
  {
    path: '/',
    exact: true,
    component: loadable(() => import('Views/Home')),
  },
  {
    path: `${base}`,
    exact: true,
    component: loadable(() => import('Views/Home')),
  },
  {
    path: `${base}/index`,
    component: loadable(() => import('Views/Home')),
  },
  {
    path: `${base}/404`,
    component: loadable(() => import('Views/404')),
  },
  {
    path: `${base}/floorConstruct`,
    component: loadable(() => import('Views/FloorConstruct')),
  },
  {
    path: `${base}/dataTracking`,
    component: loadable(() => import('Views/DataTracking')),
  },
  {
    path: `${base}/pageConfig`,
    component: loadable(() => import('Views/PageConfig')),
  },
]

export const StaticRouters = () => (
  <Switch>
    {routeMap.map((route, index) => (
      // eslint-disable-next-line react/no-array-index-key
      <Route key={index} {...route} />
    ))}
    <Redirect to={`${base}/404`} />
  </Switch>
)

我发现StaticRouter 是() => boolean ???

我已将部分代码上传到codesandbox。

Answer 1

我在 Visual Studio 中尝试了您的所有代码，但没有出现您的错误。

感谢您的代码框。

我尝试了一些代码，我找到了一个不会抛出错误但我不知道你的错误来自哪里的解决方案。

Here is my solution.

唯一不同的是loadable(() => import('Views/Home'))不能与“组件”道具的类型匹配React.ComponentType<any> | React.ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined