Question

我将代码从javascript替换为打字稿。但是，建筑失败。
- JSX element type 'Router' does not have any construct or call signatures.
- JSX element type 'Switch' does not have any construct or call signatures.
- JSX element type 'Route' does not have any construct or call signatures.

如何解决此错误？

错误代码

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Router, Switch, Route } from 'react-router';
import { Provider } from 'react-redux';
import createBrowserHistory from 'history/createBrowserHistory';

import Counter from './containers/Container';
import store from './stores/store';
import NotFound from './components/NotFound';


const history = createBrowserHistory();

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route exact path="/counter" component={Counter} />
        <Route path="/counter/:id" component={Counter} />
        <Route component={NotFound}/>
      </Switch>
    </Router>
  </Provider>
  , document.getElementById('app')
);

，当我使用import { Route } from 'react-router-dom';时发生了同样的错误。

Answer 1

好的，首先你必须按照here的规定安装react-router-dom。然后做这样的事情，

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

import Counter from './containers/Container';
import store from './stores/store';
import NotFound from './components/NotFound';

    ReactDOM.render(
      <Provider store={store}>
        <BrowserRouter>
          <div>
            <Switch>
                <Route path="/counter" component={Counter} />
                <Route path="/invalid/path" component={NotFound} />
            </Switch>
          </div>
        </BrowserRouter>
      </Provider>
      , document.querySelector('.container'));

请注意，您必须提供每条路线的路径。默认路由配置将是这样的。这应该是最后的，因为它匹配给定顺序的URL。

<Route path="/" component={PostsIndex} />

组件可以简单地这样写。

import React, { Component } from 'react';
class PostsIndex extends Component {
  render() {
    return (
      <div>
        Index page
      </div>
    )
  }
}

无论如何我没有使用反应类型脚本，因为它很少使用。但上面给出的方法应该有效。

希望这会有所帮助。快乐的编码！

Answer 2

我不能感谢你的话！在修改后的node_modules/@types/react-router/index.d.ts之后修复了错误。

前

export class MemoryRouter extends React.Component<MemoryRouterProps> { }
export class Prompt extends React.Component<PromptProps> { }
export class Redirect extends React.Component<RedirectProps> { }
export class Route extends React.Component<RouteProps> { }
export class Router extends React.Component<RouterProps> { }
export class StaticRouter extends React.Component<StaticRouterProps> { }

后

export class MemoryRouter extends React.Component<MemoryRouterProps, void> { }
export class Prompt extends React.Component<PromptProps, void> { }
export class Redirect extends React.Component<RedirectProps, void> { }
export class Route extends React.Component<RouteProps, void> { }
export class Router extends React.Component<RouterProps, void> { }
export class StaticRouter extends React.Component<StaticRouterProps, void> { }

这是“@ types / react-router”：“^ 4.0.12”的错误。

Answer 3

从

更改后，我遇到了类似的问题

export class Provider extends React.Component<ProviderProps> { }

到

export class Provider extends React.Component<ProviderProps, void> { }

在index.d.ts中

，问题就消失了。希望这可以帮到你。

Answer 4

我的最新代码

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { BrowserRouter as Router, Route, Switch, RouteComponentProps } from 'react-router-dom';
import { Provider } from 'react-redux';

import Counter from './containers/Container';
import store from './stores/store';
import NotFound from './components/NotFound';

class PostsIndex extends React.Component<RouteComponentProps<any>, {}> {
  render() {
    return (
      <div>
        Index page
      </div>
    )
  }
}

ReactDOM.render(
  <Provider store={store}>
    <Router>
      <div>
        <Switch>
          <Route exact path="/" component={PostsIndex} />
          <Route exact path="/counter" component={Counter} />
          <Route component={NotFound} />
        </Switch>
      </div>
    </Router>
  </Provider>
  , document.getElementById('app')
);

容器/组件

export default connect(
  (state: ReduxState) => ({value: state.counter}),
  (dispatch: Dispatch<ReduxAction>, ownProps: RouteComponentProps<{myParams: string}>) => {
    return {actions: new ActionDispatcher(dispatch)}
  }
)(Counter);

错误消息

ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(46,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(56,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(74,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(79,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(87,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

ERROR in /workspace/react-router-typescript/node_modules/@types/react-router/index.d.ts
(92,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

ERROR in ./src/Index.tsx
(24,10): error TS2604: JSX element type 'Switch' does not have any construct or call signatures.

ERROR in ./src/Index.tsx
(25,12): error TS2604: JSX element type 'Route' does not have any construct or call signatures.

ERROR in ./src/Index.tsx
(26,12): error TS2604: JSX element type 'Route' does not have any construct or call signatures.

ERROR in ./src/Index.tsx
(27,12): error TS2604: JSX element type 'Route' does not have any construct or call signatures.

路由器反应中可能存在错误...
构建失败，但成功页面转换和渲染......

JSX元素类型＆＃39;路线＆＃39;没有任何构造或呼叫签名

4 个答案: