title: Write PrivateRoute Component in a typescript friendly way
body: <p>I am learning to use React Router in Typescript. I am also reading this article on how to implement PrivateRoutes in typescript+react router.</p>
  
  <p><a href="https://tylermcginnis.com/react-router-protected-routes-authentication/" rel="nofollow noreferrer">https://tylermcginnis.com/react-router-protected-routes-authentication/</a></p>
  
  <p>The blog above has a code segment to implement the PrivateRoute as </p>
  
  <pre><code>const PrivateRoute = ({component: Component, ...rest}) =&gt; (
     &lt;Route {...rest} render={(props) =&gt; (
        isLoggedIn.isAuthenticated === true ? &lt;Component {...props} /&gt; : &lt;Redirect to='/login' /&gt;
     )} /&gt;
  )
  </code></pre>
  
  <p>However my typescript compiler doesn't like the above code</p>
  
  <pre><code>ERROR in [at-loader] ./src/components/Main.tsx:19:35
      TS7031: Binding element 'Component' implicitly has an 'any' type.
  Child html-webpack-plugin for "index.html":
  </code></pre>
  
  <p>How can I modify this code above so that it becomes typescript friendly?</p>