用打字稿反应路由器

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 需要 class 上的 < > 标记之间的类型说明符。这表明 class 是一个需要进一步定义的泛型。

我找不到关于您正在使用的 class 的具体文档，但我想这样的内容可能会帮助您找到正确的地方：

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

用打字稿反应路由器

React router with typescript

typescript

reactjs

react-router

react-router-dom