React.Component kein ReactType

Question

Ich baue eine React-App in Typescript, und ich bekomme den folgenden Fehler für jede Komponente, die ich in meinen Router aufnehmen möchte.

ERROR in [at-loader] ./src/scripts/components/AppRouter.tsx:14:25 
    TS2322: Type 'typeof "E:/Programming Projects/free-food-app/src/scripts/components/OverviewPage"' is not assignable to type 'ReactType'. 
    Type 'typeof "E:/Programming Projects/free-food-app/src/scripts/components/OverviewPage"' is not assignable to type 'StatelessComponent<any>'. 
    Type 'typeof "E:/Programming Projects/free-food-app/src/scripts/components/OverviewPage"' provides no match for the signature '(props: any, context?: any): ReactElement<any>' 

Ich verstehe das überhaupt nicht. Es scheint, als ob eine Klasse, die React.Component erweitert, in der Lage sein sollte, in den Router aufgenommen zu werden. Warum bekomme ich diese Fehler?

AppRouter.tsx:

import * as React from 'react'; 
import { Router, Route, hashHistory } from 'react-router'; 
import * as OverviewPage from './OverviewPage'; 
import * as AssignmentViewPage from './AssignmentViewPage'; 
import * as SubmissionEditPage from './SubmissionEditPage'; 
import * as SubmissionSubmitPage from './SubmissionSubmitPage'; 
import * as SubmissionViewPage from './SubmissionViewPage'; 

export default class AppRouter extends React.Component<any, any> { 

    public render() { 
    return (
     <Router history={hashHistory}> 
     <Route path="/" component={OverviewPage}/> 
     <Route path="/assingment" component={AssignmentViewPage}/> 
     <Route path="/submission/edit" component={SubmissionEditPage}/> 
     <Route path="/submission/submit" component={SubmissionSubmitPage}/> 
     <Route path="/submission/" component={SubmissionViewPage}/> 
     </Router> 
    ); 
    } 
} 

Edit: OverviewPage.tsx

import * as React from 'react'; 

class OverviewPage extends React.Component<any, any> { 
    public render() { 
    return (
     <div> 
     <p>Overview</p> 
     </div> 
    ); 
    } 
} 

export { OverviewPage } 

Answer 1

Ich habe genau dieses Problem hatte und was ich fand, war dies. React Router ist nur dann zufrieden, wenn Requisiten und Status entweder einen Typ haben oder ein leeres Objekt sind. Sie können nicht auf irgendwelche gesetzt werden.

Nach näherer Betrachtung Ihrer Bearbeitungen denke ich, dass das Problem mehr als die Art von Zustand und Requisiten sein kann.

Da Sie nicht den Export-Standard verwenden, exportieren Sie tatsächlich einen Schlüssel und einen Wert, wobei der Wert Ihre Komponente ist. React Router erwartet eine Komponente, aber Sie geben nur den Schlüssel weiter. Sie können entweder Standard verwenden, um Ihr Problem zu lösen, oder die import {component} Syntax verwenden.

Answer 2

Ich habe es funktioniert. Das Problem war, wie ich Exporte ausführte. Ich glaube, ich habe eine Art von Objekt importiert, indem ich import * as OverviewPage from './OverviewPage'; gemacht habe.

Stattdessen sollte ich export default class OverviewPage und importieren Sie die Klasse als import OverviewPage from './OverviewPage';. Sobald ich das getan habe, fing es an, ohne Beschwerde zu arbeiten.