title: React TypeScript HoC - passing Component as the prop
body: <p>Following this tutorial: <a href="https://reacttraining.com/react-router/web/example/auth-workflow" rel="noreferrer">https://reacttraining.com/react-router/web/example/auth-workflow</a>.</p>
  
  <p>Trying to reproduce the code:</p>
  
  <pre><code>const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
    &lt;Route
      {...rest}
      render={props =&gt;
        fakeAuth.isAuthenticated ? (
          &lt;Component {...props} /&gt;
        ) : (
          &lt;Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          /&gt;
        )
      }
    /&gt;
  );
  </code></pre>
  
  <p>In TypeScript:</p>
  
  <pre><code>import * as React from 'react';
  import { Route, RouterProps } from 'react-router';
  
  interface Props extends RouterProps {
    component: React.Component;
  }
  
  const PrivateRoute = ({ component: Component, ...rest }: Props) =&gt; {
    return (
      &lt;Route
        {...rest}
        render={(props) =&gt; &lt;Component {...props} /&gt;}
      /&gt;
    );
  };
  
  export default PrivateRoute;
  </code></pre>
  
  <p>But it would always fail. Tried different variations. The one I've posted the most recent one. Getting:</p>
  
  <p><a href="https://i.stack.imgur.com/L3G2j.png" rel="noreferrer"><img src="https://i.stack.imgur.com/L3G2j.png" alt="enter image description here"></a></p>
  
  <p>It seems to me that I have to pass Generic for the Component type, but I don't know how.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The closest solution so far:</p>
  
  <pre><code>interface Props extends RouteProps {
    component: () =&gt; any;
  }
  
  const PrivateRoute = ({ component: Component, ...rest }: Props) =&gt; {
    return (
      &lt;Route
        {...rest}
        render={(props) =&gt; &lt;Component {...props} /&gt;}
      /&gt;
    );
  };
  </code></pre>
  
  <p>And then:</p>
  
  <pre><code>&lt;PrivateRoute component={Foo} path="/foo" /&gt;
  </code></pre>