4

我正在将代码从 javascript 替换为 typescript。但是，建设失败。
- 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';.

4

3 回答 3

0

我有类似的问题，从

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

至

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

在 index.d.ts 中，问题消失了。希望这可以帮到你。

于 2017-11-08T00:33:27.907 回答
0

好的，首先您必须按照此处所述安装 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>
    )
  }
}

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

希望这可以帮助。快乐编码！

于 2017-07-02T05:17:30.907 回答
-1

我不能感谢你的话！
像这样修改 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" 的错误。

于 2017-07-02T13:40:56.300 回答