Typoskript Fehler mit React Router DOM

Question

Nach der Installation react-router-dom und history mit Garn, Installation ihrer jeweiligen Typdefinitionen (@types/react-router-dom und @types/history), lese ich die folgenden Fehler. Kann mir jemand helfen, sie zu lösen, weil ich nicht sicher bin, wie man 'Konstrukt- oder Anrufsignaturen hinzufügt', oder verstehe ich nicht, was mit der Komponente falsch ist, die ich an meine Route Komponente übergebe.

Hier sind die Fehler:

Failed to compile. 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts 
(40,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts 
(46,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts 
(56,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts 
(74,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts 
(79,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts 
(87,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts 
(92,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts 
(33,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts 
(40,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts 
(46,22): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts 
(55,25): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s). 

Error in ./src/index.tsx 
(28,6): error TS2604: JSX element type 'Router' does not have any construct or call signatures. 

Error in ./src/index.tsx 
(29,8): error TS2604: JSX element type 'Switch' does not have any construct or call signatures. 

Error in ./src/index.tsx 
(30,10): error TS2604: JSX element type 'Route' does not have any construct or call signatures. 

Hier ist die Datei:

// React 
import * as React from 'react'; 
import * as ReactDOM from 'react-dom'; 
import { Route, Router, Switch } from 'react-router-dom'; 
import { createBrowserHistory } from 'history'; 


// Redux 
import { Provider } from 'react-redux'; 

// Custom 
import Home from './containers/Home'; 

// Styles 
import './styles.css'; 

// Store 
import { configureStore } from './store'; 

// Configure Store 
const store = configureStore(); 

const history = createBrowserHistory(); 

// Render 
ReactDOM.render(
    <Provider store={store}> 
    <Router history={history}> 
     <Switch> 
     <Route exact path='/' component={Home} /> 
     </Switch> 
    </Router> 
    </Provider>, 
    document.getElementById('root') as HTMLElement 
); 

und hier ist mein package.json:

{ 
    "name": "eai-reactjs-typescript-redux-starter", 
    "description": "A ReactJS/TypeScript + Redux starter template with a detailed README describing how to use these technologies together and constructive code comments.", 
    "version": "0.1.0", 
    "private": true, 
    "homepage": ".", 
    "dependencies": { 
    "amazon-cognito-identity-js": "^1.19.0", 
    "amazon-cognito-js": "^1.1.0", 
    "aws-sdk": "^2.80.0", 
    "history": "^4.6.3", 
    "react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-redux": "^5.0.5", 
    "react-router-dom": "^4.1.1", 
    "redux": "^3.7.0", 
    "redux-logger": "^3.0.6" 
    }, 
    "devDependencies": { 
    "@types/enzyme": "^2.8.0", 
    "@types/history": "^4.6.0", 
    "@types/jest": "^19.2.3", 
    "@types/node": "^7.0.18", 
    "@types/react": "^15.0.24", 
    "@types/react-dom": "^15.5.0", 
    "@types/react-redux": "^4.4.40", 
    "@types/react-router-dom": "^4.0.5", 
    "@types/redux-logger": "^3.0.0", 
    "enzyme": "^2.8.2", 
    "react-addons-test-utils": "^15.5.1", 
    "react-scripts-ts": "1.4.0", 
    "redux-devtools-extension": "^2.13.2" 
    }, 
    "scripts": { 
    "start": "react-scripts-ts start", 
    "build": "react-scripts-ts build", 
    "test": "react-scripts-ts test --env=jsdom", 
    "eject": "react-scripts-ts eject" 
    } 
} 

Hier a link meinem GitHub Repo wenn Jeder möchte sich den gesamten Code genauer ansehen.

Answer 1

Ich hatte das gleiche Problem. Running npm install @types/react @types/react-dom --save-dev, um diese Pakete zu aktualisieren, hat es behoben.