Le type d'élément JSX 'Route' n'a aucune construction ou signature d'appel

Question

Je remplace le code de javascript par tapuscrit. Mais, échouer la construction.
- 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.

Comment puis-je corriger cette erreur?

code erroné

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') 
); 

et même erreur est survenue quand je import { Route } from 'react-router-dom';.

Answer 1

Ok, vous devez d'abord installer rea-routeur-dom comme indiqué here. Ensuite, faites quelque chose comme ceci,

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')); 

Notez que vous devez fournir le chemin de chaque route. La configuration de route par défaut serait quelque chose comme ça. Cela devrait venir enfin car il correspond aux urls dans l'ordre donné.

<Route path="/" component={PostsIndex} /> 

Le composant peut simplement être écrit comme ceci.

import React, { Component } from 'react'; 
class PostsIndex extends Component { 
    render() { 
    return (
     <div> 
     Index page 
     </div> 
    ) 
    } 
} 

De toute façon, je n'ai pas utilisé de scripts de type avec réagir car il est rarement utilisé. Mais l'approche donnée ci-dessus devrait fonctionner.

Espérons que cela aide. Codage heureux!

Answer 2

mon dernier code

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') 
); 

conteneurs/composants

export default connect(
    (state: ReduxState) => ({value: state.counter}), 
    (dispatch: Dispatch<ReduxAction>, ownProps: RouteComponentProps<{myParams: string}>) => { 
    return {actions: new ActionDispatcher(dispatch)} 
    } 
)(Counter); 

Message d'erreur

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. 

Il peut y avoir un bug dans React routeur ...
construction échoue, mais transition de page de succès et de rendu ...

Answer 3

Je ne peux pas vous remercier assez pour les mots!
Correction d'un bug après modification de node_modules/@types/react-router/index.d.ts comme ceci.

avant

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

après

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

Ceci est "@ types/réagir-routeur": bug de "^ 4.0.12".

Answer 4

J'ai eu problème similaire, après le changement de

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

à

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

dans index.d.ts, le problème disparu. J'espère que cela peut vous aider.