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';使用import { Route } from 'react-router-dom';時發生了同樣的錯誤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>
    )
  }
}

無論如何我沒有使用類型腳本反應，因為它很少使用。 但上面給出的方法應該有效。

希望這可以幫助。 快樂的編碼！

Answer 2

我不能感謝你的話！
在修改后的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”的錯誤。

Answer 3

改變后，我有類似的問題

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

至

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

在index.d.ts中，問題消失了。 希望這可以幫到你。

Answer 4

我的最新代碼

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.

反應路由器可能存在錯誤......
構建失敗，但成功頁面轉換和呈現...