Question

我正在将react-router和react-router-dom与Typescript一起使用来构建应用程序。我已经以这种方式（routes.tsx）定义了路线：

import * as React from 'react';
import createBrowserHistory from 'history/createBrowserHistory';
import { Router, Route, Switch } from 'react-router-dom';
import SignUp from '../routes/signup';

const history = createBrowserHistory();

const Routes: React.StatelessComponent<{}> = () => (
  <Router history={history}>
    <Switch>
      <Route exact path='/signup' component={SignUp} />
    </Switch>
  </Router>
);

export default Router;

我有一个主要的App组件，可以呈现此Routes组件：

import * as React from 'react';
import Routes from './routes';

const App: React.StatelessComponent<{}> = () => (
  <Routes />
);

export default App;

编译器抛出此错误

(5,4): Type '{}' is not assignable to type 'Readonly<RouterProps>'.
  Property 'history' is missing in type '{}'.

我是TS的新手，所以我不确定到底是怎么回事。

Answer 1

与大多数语言一样，

TypeScript希望在类的< >标记之间使用类型说明符。这表明该类是需要进一步定义的泛型。

我无法找到您正在使用的此类的特定文档，但是我想类似的东西可能会帮助您到达正确的位置：

const App: React.StatelessComponent<RouterProps> = () => (
  <Routes />
);

用打字稿反应路由器

1 个答案: