title: react-router-dom TypeScript TS2322: Type 'typeof Index' is not assignable to type
body: <p>Im getting quite a few of the same TypeScritp error in my main React component using react-router-dom. All of the child components are returning errors:</p>
  
  <pre><code>error TS2322: Type 'typeof NotFound' is not assignable to type 'StatelessComponent&lt;void | RouteComponentProps&lt;any&gt;&gt; | ComponentClass&lt;void | RouteComponentProps&lt;a...'.
    Type 'typeof NotFound' is not assignable to type 'ComponentClass&lt;void | RouteComponentProps&lt;any&gt;&gt;'.
      Types of parameters 'props' and 'props' are incompatible.
        Type 'void | RouteComponentProps&lt;any&gt; | undefined' is not assignable to type '{} | undefined'.
          Type 'void' is not assignable to type '{} | undefined'.
  
  
  error TS2322: Type 'typeof Index' is not assignable to type 'StatelessComponent&lt;void | RouteComponentProps&lt;any&gt;&gt; | ComponentClass&lt;void | RouteComponentProps&lt;a...'.
    Type 'typeof Index' is not assignable to type 'ComponentClass&lt;void | RouteComponentProps&lt;any&gt;&gt;'.
      Type 'Index' is not assignable to type 'Component&lt;void | RouteComponentProps&lt;any&gt;, ComponentState&gt;'.
        Types of property 'props' are incompatible.
          Type 'Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;Props&gt;' is not assignable to type '(Readonly&lt;{ children?: ReactNode; }&gt; &amp; void) | (Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;Ro...'.
            Type 'Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;Props&gt;' is not assignable to type 'Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;RouteComponentProps&lt;any&gt;&gt;'.
              Type 'Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;Props&gt;' is not assignable to type 'Readonly&lt;RouteComponentProps&lt;any&gt;&gt;'.
                Property 'match' is missing in type 'Readonly&lt;{ children?: ReactNode; }&gt; &amp; Readonly&lt;Props&gt;'.
  </code></pre>
  
  <p>My Main.tsx component looks like this (all other components.tsx seem to compile without issue):</p>
  
  <pre><code>import * as React from 'react';
  import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
  
  import Index from './Index';
  import Explore from './Explore';
  import NotFound from './NotFound';
  
  class Main extends React.Component&lt;{},{}&gt; {
  
    render () {
  
      return (
        &lt;Router&gt;
            &lt;Switch&gt;
              &lt;Route path="/" exact={true} component={Index} /&gt;
              &lt;Route path="/explore/things/:id" component={Explore} /&gt;
              &lt;Route component={NotFound} /&gt;
            &lt;/Switch&gt;
        &lt;/Router&gt;
      )
  
    }
  }
  
  export default Main;
  </code></pre>
  
  <p>Can anyone provide some clues?</p>