Лучшие практики для использования управления версии на проектах Какао

withRouter() имеет эффект обеспечения реквизита для компонента, который он оборачивает. Поэтому, чтобы использовать его, компонент, который вы хотите обернуть, должен ожидать этих реквизитов. В этом случае Authenticated ожидает только IAuthenticatedProps, но withRouter() предоставляет гораздо больше. Поэтому TypeScript жалуется, потому что withRouter() пытается предоставить реквизит Authenticated, который Authenticated не говорит, что он ожидает.

Опоры, которые предоставляет withRouter(), определены в интерфейсе RouteComponentProps. Попробуйте добавить это к вашему типу пропасти для Authenticated:

  class Authenticated extends React.Component<
    IAuthenticatedProps & RouteComponentProps<{}>,
    IAuthenticatedState
  > {
    // ...
  }

Вы также можете удалить location из вашего интерфейса IAuthenticatedProps, так как он также включен в интерфейс RouteComponentProps.

Еще одна проблема состоит в том, что опора render в Route ожидает функцию, а не какой-либо старый тип компонента React. Поскольку isAuthenticated() возвращает React.ComponentClass, вам нужно сделать что-то вроде следующего:

const Authenticated = isAuthenticated(LandingPage);
// ...
<Route
  exact
  path={INDEX_URL}
  render={(props: any) => <Authenticated {...props} />}
/>