JSX 元素类型"路由"没有任何构造或调用签名

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

好的，首先你必须安装 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"的错误。