title: How to pass props to route in react router v5 with Typescript?
body: <p>I have a route that looks like this, which renders just fine:</p>
  
  <pre><code>&lt;Route
    exact={true} 
    path="/"
    render={() =&gt; {
      return &lt;Home/&gt;
    }}
  /&gt;
  </code></pre>
  
  <p>If I add in any prop, I get the following warning:</p>
  
  <pre><code>&lt;Route
     exact={true} path="/"
     render={() =&gt; {
       return &lt;Home foo="bar"/&gt;
     }}
  /&gt;
  </code></pre>
  
  <blockquote>
    <p>Type '{ foo: string; }' is not assignable to type 'IntrinsicAttributes
    &amp; { children?: ReactNode; }'.   Property 'foo' does not exist on type
    'IntrinsicAttributes &amp; { children?: ReactNode; }'.  TS2322</p>
  </blockquote>
  
  <p>How can I pass props to a component with Typescript and React Router?</p>
  
  <p>My <code>Home</code> component looks like this:</p>
  
  <pre><code>type homeType = {
    foo: string
  }
  
  const Home: React.FC = ({foo}: homeType) =&gt; { 
    return &lt;p&gt;{foo}&lt;/p&gt;
  }
  </code></pre>