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

，消失的問題。 希望這可以幫助你。