JSX 元素类型 'Route' 没有任何构造或调用签名

Question

我正在将代码从 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'; 时发生同样的错误。

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>
    )
  }
}

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

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

Answer 2

我有类似的问题，从改变后

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

到

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

在 index.d.ts 中，问题消失了。 希望对您有所帮助。

Answer 3

我对你的言语感激不尽！
像这样修改 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" 的错误。