title: React URI params in functional components
body: <p><strong>What would be the correct approach to reading URI parameters from a functional React component?</strong></p>
  
  <p>In JavaScript, if the component is a direct child of a <code>Switch</code>, we could do:</p>
  
  <pre class="lang-js prettyprint-override"><code>function MyComponent(props) {
      const query = props.location.search;
      // ...
  }
  </code></pre>
  
  <p>If the component is not a direct child of a <code>Switch</code>, we could use a class:</p>
  
  <pre class="lang-js prettyprint-override"><code>class MyComponent extends Component&lt;RouteComponentProps&gt; {
      render() {
          const query = this.props.location.search;
          // ...
      }
  }
  
  export default withRouter(MyComponent);
  </code></pre>
  
  <p><strong>What about a functional component in strict TypeScript?</strong></p>
  
  <p>We want the <code>location</code> property (and any other, if there are more) to be available and predefined by some <code>interface</code> or <code>type</code>, but supplied by React, not the user of the component. An ugly hack would be to define the interface ourselves and then expect it to actually be that way.</p>