代码之家 › 专栏 › 技术社区 › Tarang Hirani

用typescript响应路由器

react-router-dom react-router typescript reactjs

1

Tarang Hirani · 技术社区 · 7 年前

我在用 react-router 和 react-router-dom 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,所以我不知道到底是怎么回事。

1 回复 | 直到 7 年前

1

Ian MacDonald 7 年前

与大多数语言一样,TypeScript要求在 < > 班上的标记。这表示类是一个需要进一步定义的泛型。

我找不到您正在使用的这个类的特定文档,但我想这样的东西可能有助于您找到正确的位置:

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