title: React Routing with Dynamic Route Unable to find this.props.match.params
body: <p>I have a React BrowserRouter in which I have three routes, shown below:</p>
  
  <pre><code>&lt;BrowserRouter&gt;
              &lt;Switch&gt;
                  &lt;Route exact
                         path="/"
                         component={(routeProps: object) =&gt; (
                             &lt;Component1 toggle="Previous" {...routeProps} /&gt;
                         )}
                  /&gt;
                  &lt;Route path="/active"
                         component={(routeProps: object) =&gt; (
                             &lt;Component1 toggle="Active" {...routeProps} /&gt;
                         )}
                  /&gt;
                  &lt;Route path="/items/:id"
                         render={(props) =&gt; &lt;Component2 {...props}/&gt;}
                  /&gt;
              &lt;/Switch&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>I am attempting to pass the id into Component2 as shown, in order to get an item by id with a get api call. My Component2 is shown below:</p>
  
  <pre><code>export default class Component2 extends React.Component&lt;Props &amp; RouteComponentProps, State&gt; {
  
      public constructor(props: Props &amp; RouteComponentProps) {
          super(props);
          this.state = {
              item: {
                  //Item initialization
              }
          };
      }
  
      public async componentWillMount() {
          let job = await ItemService.fetch(this.props.match.params);
          this.setState({item: item});
      };
  
  
      public render() {
          let {item} = this.state;
          return (
              &lt;div className="item-details"&gt;
                  &lt;Component3 item={item}/&gt;
              &lt;/div&gt;
  
          )
      }
  }
  </code></pre>
  
  <p>However, I am receiving an error on the line containing <code>this.props.match.params.id</code>.</p>
  
  <ul>
  <li>The first error is if I do not include the RouteComponentProps, on <code>this.props.match.params</code> states: <code>Property match does not exist on type &lt;Readonly&lt;Props&gt; &amp; Readonly&lt;ReactNode&gt;</code>
  
  <ul>
  <li>There is another Stack Overflow post that led to the idea that you need RouteComponentProps in the ReactComponent in order to find the props, but had no explanation as of why.</li>
  </ul></li>
  <li>If I add the RouteComponentProps, I fix the first error but am still unable to get the id from the params. I receive the error: <code>property id does not exist on type {}</code></li>
  </ul>
  
  <p>After searching through questions on SO and many react routing examples, I am stuck. My end goal is to have a component (Component2) that will:</p>
  
  <ol>
  <li>Be routed to when the url matches <code>items/:id</code>(i.e. <code>/items/3</code>)</li>
  <li>Pass the id of 3 into that Component and call the Backend to get the item</li>
  <li>Save the item from the backend call to the state(local state of Component2)</li>
  <li>Pass that item from the state into children components</li>
  </ol>
  
  <p>I also am curious in the difference between: </p>
  
  <ul>
  <li><code>React.Component</code></li>
  <li><code>React.Component&lt;Props&gt;</code></li>
  <li><code>React.Component&lt;Props, State&gt;</code></li>
  <li><code>React.Component&lt;Props &amp; RouteComponentProps, State&gt;</code></li>
  </ul>
  
  <p>as my reference to the component in the <code>&lt;Route</code> produces errors when I switch the Component declaration with the React.Components above.</p>