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，如here所述。然后做这样的事情，

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

我最新的代码

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. 

有可能是在一个错误的反应路由器...
构建失败，但成功页面转换和呈现...

Answer 3

我无法用语言表达谢意！
在修改node_modules/@types/react-router/index.d.ts之后修正了这个Bug。

之前

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

这是 “@类型/反应路由器”： “^ 4.0.12” 的错误。

Answer 4

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

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

到

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

在index.d.ts

，消失的问题。 希望这可以帮助你。