title: Extending props with the withRouter HOC in Next.js
body: <p>I'm trying to use withRouter HOC helper in the Next.js library.</p>
  
  <pre><code>import { withRouter } from 'next/router'
  
  const MyComponent = withRouter(({ router }) =&gt; ())
  </code></pre>
  
  <p>This gives a flow error:</p>
  
  <pre><code>[flow] property `router` is missing in props [1]. (References: [1])
  </code></pre>
  
  <p>Even though I have the flow types installed for Next.js and withRouter function has the following signature:</p>
  
  <pre><code>withRouter: &lt; T &gt; (Component: React$ComponentType &lt; (T &amp; {
    router: Router
  }) &gt; ) =&gt; class React$Component
  </code></pre>
  
  <p>I thought flow would work out that <code>router</code> is injected by withRouter, but that doesn't seem to be the case? How do I fix this type error?</p>
  
  <p>I tried importing the Router type and declaring it as a prop:</p>
  
  <pre><code>import { Router } from 'next/router'
  
  type Props = { router: Router }
  const MyComponent = withRouter(({ router: Router }: Props) =&gt; ())
  </code></pre>
  
  <p>This removes the error, but now I get a different one:</p>
  
  <pre><code>Property router is missing in props [1] but exists in object type [2].
  
   [1] 61│         {typeof query.post !== 'undefined' &amp;&amp; &lt;Post /&gt;}
  
   [2] 29│ const Basic = withRouter(({ router }: { router: Router }) =&gt; (
  </code></pre>