введите ошибку в response-router-dom и отреагируйте с помощью машинописного текста

Question

Я новичок в реакции на машинопись, столкнувшись с проблемой в следующем коде

Вот код компонента приборной панели

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;

В коде маршрута я сталкиваюсь с проблемой типа, т.е.

Ошибка TypeScript в E: /Web/src/router/route.tsx (18,51):

Перегрузка не соответствует этому вызову.

Перегрузка 1 из 2, '(props: Readonly): Route', выдала следующую ошибку. Тип '{Панель инструментов: строка; } 'нельзя назначить типу' ComponentClass | FunctionComponent | ComponentClass, любой> | FunctionComponent <...> | undefined '.

Тип' {Панель инструментов: строка; } 'нельзя присвоить типу' FunctionComponent> '. Тип '{Панель инструментов: строка; } 'не соответствует для подписи' (props: PropsWithChildren>, context ?: any): ReactElement <...> | null '.

Перегрузка 2 из 2,' (props: RouteProps, context ?: any): Route ', возникла следующая ошибка. Тип '{Панель инструментов: строка; } 'нельзя присвоить типу' ComponentClass | FunctionComponent | ComponentClass, любой> | FunctionComponent <...> | undefined '.

Тип' {Панель инструментов: строка; } 'нельзя присвоить типу' FunctionComponent> '. TS2769

16 |       <div>
17 |         <Switch>

18 | | ^ "

Answer 1

Похоже, что вы не дали своим компонентам тип (dashboard и login).

Вам нужно сделать что-то похожее на изображение объявления компонента ниже, где вы устанавливаете тип вашего компонента как React.FC после импорта библиотеки React. (F C означает функциональный компонент, поскольку мы не используем модель компонентов на основе классов)

Изображение компонента