title: Does react-router need specific guidance when using Flow types?
body: <p>I have the following fairly simple React component.</p>
  
  <p>Because it's a navigational component, I'm using <code>withRouter</code> to gain access to the <code>RouterHistory</code> object.</p>
  
  <p>I'm also using Flow for typing and I have the <code>flow-typed</code> filed for <code>react-router_v4</code></p>
  
  <pre><code>// @flow
  import * as React from 'react';
  import classnames from 'classnames';
  import {withRouter} from 'react-router';
  import type {RouterHistory} from 'react-router';
  
  import '../sass/Link.scss';
  
  type Props = {
    disabled?: boolean,
    href: string,
    className?: string,
    history: RouterHistory,
    children: *,
  };
  
  const Link = ({history, href, disabled, children, className}: Props) =&gt; (
    &lt;span
      className={classnames(['link', className, {disabled}])}
      onClick={() =&gt; history.push(href)}&gt;
      {children}
    &lt;/span&gt;
  );
  
  Link.defaultProps = {
    className: '',
    disabled: false,
  };
  
  export default withRouter(Link);
  </code></pre>
  
  <p>When I run my Flow check, it churns out the following errors:</p>
  
  <pre><code>Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ components/Link.jsx:17:14
  
  Property className is missing in object type [1] but exists in Props [2] in the first argument.
  
       components/Link.jsx
        14│   children: *,
        15│ };
        16│
   [2]  17│ const Link = ({history, href, disabled, children, className}: Props) =&gt; (
        18│   &lt;span
        19│     className={classnames(['link', className, {disabled}])}
        20│     onClick={() =&gt; history.push(href)}&gt;
        21│     {children}
        22│   &lt;/span&gt;
        23│ );
        24│
        25│ Link.defaultProps = {
        26│   className: '',
  
       flow-typed/npm/react-router_v4.x.x.js
   [1] 120│     Component: React$ComponentType&lt;{| ...ContextRouter, ...P |}&gt;
  
  
  Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ components/Link.jsx:17:14
  
  Property disabled is missing in object type [1] but exists in Props [2] in the first argument.
  
       components/Link.jsx
        14│   children: *,
        15│ };
        16│
   [2]  17│ const Link = ({history, href, disabled, children, className}: Props) =&gt; (
        18│   &lt;span
        19│     className={classnames(['link', className, {disabled}])}
        20│     onClick={() =&gt; history.push(href)}&gt;
        21│     {children}
        22│   &lt;/span&gt;
        23│ );
        24│
        25│ Link.defaultProps = {
        26│   className: '',
  
       flow-typed/npm/react-router_v4.x.x.js
   [1] 120│     Component: React$ComponentType&lt;{| ...ContextRouter, ...P |}&gt;
  </code></pre>
  
  <p>Trying to decipher the error message, I tried changing my export to:</p>
  
  <pre><code>export default withRouter&lt;Props&gt;(Link);
  </code></pre>
  
  <p>But that just generates the error:</p>
  
  <pre><code>Cannot call withRouter with Link bound to Component because function [1] is incompatible with statics of
  React.Component [2].
  </code></pre>
  
  <p>I feel like I'm missing something here - it seems like the typing here is all above board, but I'm getting these errors. What am I missing?</p>