title: React-router + typescript type error
body: <p>While creating my react app with typescript I ran into a small issue that I have not been able to solve just yet.</p>
  
  <p>My code:</p>
  
  <p>App.tsx</p>
  
  <pre><code>import  * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  import * as promise from 'redux-promise';
  import reducers from './reducers';
  import TemplateNavTop from './components/layout/template-nav-top';
  const TestComponent2 = () =&gt; {
    return &lt;h1&gt;TestComponent&lt;/h1&gt;;
  }
  
  const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
  
  ReactDOM.render(
  &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;BrowserRouter&gt;
          &lt;Switch&gt;
              &lt;Route path="/" exact component={TestComponent} /&gt;
              &lt;Route path="/checkout"&gt;
                  &lt;TemplateNavTop&gt;
                      &lt;TestComponent2 /&gt;
                  &lt;/TemplateNavTop&gt;
              &lt;/Route&gt;
          &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
  &lt;/Provider&gt;
  , document.getElementById('root')
  </code></pre>
  
  <p>template-nav-top</p>
  
  <pre><code>import * as React from 'react';
  import NavTop from './nav-top/nav-top';
  export default class TemplateNavTop extends React.Component&lt;any, {}&gt; {
    render() {
      return (
          &lt;div&gt;
              asd
              {this.props.children}
              Footer
          &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>The problem appears in the /checkout route, where it complains about the following:</p>
  
  <pre><code>Type '{ path: "/checkout"; children: Element; }' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;Route&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; &amp; Rea...'.
    Type '{ path: "/checkout"; children: Element; }' is not assignable to type 'Readonly&lt;RouteProps&gt;'.
      Types of property 'children' are incompatible.
        Type 'Element' is not assignable to type '(props: RouteComponentProps&lt;any&gt;) =&gt; ReactNode'.
  </code></pre>
  
  <p>I found out the the following workaround does work:</p>
  
  <pre><code>&lt;Route path="/checkout" component={() =&gt; TemplateWithNavBar(&lt;TestComponent2 /&gt;)} /&gt;
  </code></pre>
  
  <p>But I'd rather do it the right way, anyone here able to help me out?</p>
  
  <p>Edit: I Do have the @types installed</p>