Typescript ConnectedRouter 没有重载匹配这个调用答案

【问题标题】：Typescript ConnectedRouter No overload matches this callTypescript ConnectedRouter 没有重载匹配这个调用
【发布时间】：2022-06-11 13:43:50
【问题描述】：

我是 Typescript 的新手。我决定将我的一个 React Javascript 项目迁移到 Typescript。因为我使用的是 Connected React Router，所以我遵循了它的示例 here，但我的 IDE (IntelliJ) 抱怨“没有与此调用匹配的重载”。这是我的 App.tsx

import React from 'react';
import { History } from 'history'
import { ConnectedRouter } from 'connected-react-router'
import {routes} from './redux/router/router';

interface AppProps {
  history: History
};

const App = ({history}: AppProps) => {
  return (
    <ConnectedRouter history={history}>
      {routes}
    </ConnectedRouter>
  );
};

export default App;

我的路线是这样定义的

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

const routes = (
  <>
    <Switch>
      <Route exact path='/' render={() => (<Page><Articles /></Page>)} />
      ....
    </Switch>
  </>
);

IDE 中的错误信息是

这里有几个相关的依赖

"connected-react-router": "^6.9.2"
"history": "^4.7.2",
"react": "^17.0.2",
"react-redux": "^7.2.6",
"react-router": "^5.2.1",
"react-router-dom": "^5.2.1",
"@types/history": "^4.7.2",
"@types/react": "^18.0.9",
"@types/react-dom": "^18.0.4",
"@types/react-redux": "^7.1.24",
"@types/react-router": "^5.1.18",

有什么建议可能会导致 Typescript 抱怨吗？谢谢。

【问题讨论】：

只是一个快速的想法：您是否尝试过将历史道具设为可选？喜欢做历史？：界面中的历史？

标签： reactjs typescript intellij-idea connected-react-router

【解决方案1】：

我有同样的问题，这是我的解决方案：

import React from 'react';
import { History } from 'history'
import { ConnectedRouter } from 'connected-react-router'
import {routes} from './redux/router/router';

interface AppProps {
  history: History
};

const App = ({history}: AppProps) => {
  const props = {
    history: history
  }
  return (
    <ConnectedRouter {...props}>
      {routes}
    </ConnectedRouter>
  );
};

export default App;

【讨论】：