title: In ReactJS trying to get params but I get property 'id' does not exist on type '{}'
body: <p>Here are the routes. I am trying to get the param like /fetchdata/someid and  I tried <code>this.props.match.params.id</code> this is where is says that:</p>
  
  <blockquote>
    <p>property 'id' does not exist on type '{}'</p>
  </blockquote>
  
  <pre><code>import * as React from 'react';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  import { Layout } from './components/Layout';
  import { Home } from './components/containers/Home';
  import FetchData from './components/FetchData';
  import { Counter } from './components/Counter';
  
  export const routes =
      &lt;Layout&gt;  
          &lt;Route exact path='/' component={Home} /&gt;
          &lt;Route path='/counter' component={Counter} /&gt;
          &lt;Route path='/fetchdata/:id/:param2?' component={FetchData} /&gt;    
      &lt;/Layout&gt;;
  </code></pre>
  
  <p>FetchData Component It looks like that the param id is in the match but i cannot get it. :/ I think i miss passing {match}? But i not sure on how to do it :/. Can somebody help me out? I use react-router": "4.0.12".</p>
  
  <pre><code>import * as React from 'react';
  import { RouteComponentProps, matchPath } from 'react-router';
  import 'isomorphic-fetch';
  //import FetchDataLoaded from './FetchDataLoaded';
  import { withRouter } from 'react-router-dom';
  import queryString from 'query-string';
  
  interface FetchDataExampleState {
      forecasts: WeatherForecast[];
      loading: boolean;
      lazyloadedComponent;
      id;
  }
  //const queryString = require('query-string');
  
  class FetchData extends React.Component&lt;RouteComponentProps&lt;{}&gt;, FetchDataExampleState&gt; {
      constructor(props) {
          super(props);
  
          this.state = { forecasts: [], loading: true, lazyloadedComponent: &lt;div&gt;Getting it&lt;/div&gt;, id: "" };
  
          fetch('api/SampleData/WeatherForecasts')
              .then(response =&gt; response.json() as Promise&lt;WeatherForecast[]&gt;)
              .then(data =&gt; {
                  this.setState({ forecasts: data, loading: false });
              });
      }
  
      async componentDidMount() {
          try {
              //let params = this.props.match.params
              //const idquery = queryString.parse(this.props.location .).id;
             //const idquery = queryString.parse(this.props.match.params).id;
              //const idquery = this.props.match.params.id;
              const idParam = this.props.match.params.id
              this.setState({
                  id: idParam                
              })
              const lazyLoadedComponentModule = await import('./FetchDataLoaded');
              this.setState({ lazyloadedComponent: React.createElement(lazyLoadedComponentModule.default) })
          }
          catch (err) {
              this.setState({
                  lazyloadedComponent: &lt;div&gt;${err}&lt;/div&gt;
              })
          }    
      }    
      public render() {
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              : FetchData.renderForecastsTable(this.state.forecasts);
  
          return &lt;div&gt;
              &lt;div&gt;Id: {this.state.id}&lt;/div&gt;
              {this.state.lazyloadedComponent}
              &lt;h1&gt;Weather forecast&lt;/h1&gt;
              &lt;p&gt;This component demonstrates fetching data from the server.&lt;/p&gt;
              {contents}
          &lt;/div&gt;;
      }
  
      private static renderForecastsTable(forecasts: WeatherForecast[]) {
  
          return &lt;table className='table'&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Date&lt;/th&gt;
                      &lt;th&gt;Temp. (C)&lt;/th&gt;
                      &lt;th&gt;Temp. (F)&lt;/th&gt;
                      &lt;th&gt;Summary&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  {forecasts.map(forecast =&gt;
                      &lt;tr key={forecast.dateFormatted}&gt;
                          &lt;td&gt;{forecast.dateFormatted}&lt;/td&gt;
                          &lt;td&gt;{forecast.temperatureC}&lt;/td&gt;
                          &lt;td&gt;{forecast.temperatureF}&lt;/td&gt;
                          &lt;td&gt;{forecast.summary}&lt;/td&gt;
                      &lt;/tr&gt;
                  )}
              &lt;/tbody&gt;
          &lt;/table&gt;;
      }
  }
  export default withRouter(FetchData)
  interface WeatherForecast {
      dateFormatted: string;
      temperatureC: number;
      temperatureF: number;
      summary: string;
  }
  </code></pre>