title: How to use Typescript with React Router and match
body: <h1>The approach</h1>
  
  <p>I'm trying to get my head around Typescript and React Router. I've been struggling...</p>
  
  <p>I currently get the error :</p>
  
  <blockquote>
    <p>Property 'params' does not exist on type 'RouteComponentProps&lt;{}, StaticContext, any>'.ts(2339)"`</p>
  </blockquote>
  
  <pre><code>import React from "react";
  import { RouteComponentProps } from "react-router-dom";
  
  const TopicDetail = ({ match }: { match: RouteComponentProps }) =&gt; {
    return (
      &lt;div&gt;
        &lt;h3&gt;{match.params.topicId}&lt;/h3&gt;
                   ~~~~~~
      &lt;/div&gt;
    );
  };
  
  export default TopicDetail;
  </code></pre>
  
  <h2>Look ma, no errors!</h2>
  
  <p>I <em>can</em> get rid of the errors by defining my own <code>interface</code>, but I somehow feel it's the wrong way to do it:</p>
  
  <pre><code>import React from "react";
  
  interface Props {
    params: any;
  }
  const TopicDetail = ({ match }: { match: Props }) =&gt; {
    return (
      &lt;div&gt;
        &lt;h3&gt;{match.params.topicId}&lt;/h3&gt;
      &lt;/div&gt;
    );
  };
  
  export default TopicDetail;
  </code></pre>