Блог

Используя Typescript и react-маршрутизатор-dom. Я объявляю массив для динамической генерации Route дочернего Switch элемента . Но получил ошибку типа:

 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.

Я перепробовал весь ваш код в своей visual studio, и у меня нет вашей ошибки.

Спасибо за ваш код и коробку.

Я попробовал какой-то код и нашел решение, которое не выдает ошибку, но я не знаю, откуда взялась ваша ошибка.

Вот мое решение.

Единственное, что отличается loadable(() => import('Views/Home')) , — это то, что может не совпадать с типом реквизита «компонента» React.ComponentType<any> | React.ComponentType<RouteComponentProps<any, StaticContext, unknown>> | undefined