title: How to access 'this.props.match.params' along with other props?
body: <p>I have this code in my parent component:</p>
  
  <pre><code>&lt;Route path='/champions/:id' render={(props) =&gt; &lt;ChampionDetails {...props} match={this.handleMatch}/&gt;}/&gt;
  </code></pre>
  
  <p>where the match prop will be a function that retrieves data from the child component (ChampionDetails). A snippet of my ChampionDetails (child) component:</p>
  
  <pre><code>    import React, { Component } from 'react';
  
      class ChampionDetails extends Component {
        state = {
          champId:this.props.match.params.id,
          champData:null,
          match:false
        }
  
        componentDidMount(){
          console.log('ChampionDet mounted')
          this.handleChampInfo();
          console.log(this.props.match)
        }
  
        componentDidUpdate(){
          console.log('ChampionDet updated')
        }
  
  
        handleChampInfo=()=&gt;{
          let champData = [];
          let id = this.state.champId
          console.log(id)
          fetch('/api/getChampion?id='+id)
            .then(data=&gt; { return data.json() })
            .then(json=&gt; {
              console.log(json.data);
              champData.push(json.data);
              this.setState({
                champData:json.data,
                match:true
              })
              this.props.match(true)
              // this.props.history.push('/champions/'+id)
            })
            .catch(err=&gt;{
              console.log(err)
            })
        }
  
        render(){
          return(
            &lt;div&gt;
              &lt;p&gt;{this.state.champId}&lt;/p&gt;
              {this.state.champData===null ? null:&lt;p&gt;{this.state.champData.roles}&lt;/p&gt;}
            &lt;/div&gt;
          )
        }
      }
  
      export default ChampionDetails;
  </code></pre>
  
  <p>The problem here is that if I have the match={} in my parent's route, then this.props.match.params.id will become undefined. If I remove match={} then I can retrieve this.props.match.params.id</p>
  
  <p>I would like to know if its possible to be able to pass other props while still have access to this.props.match.params.id in my case.</p>
  
  <p>Any help will be much appreciated! </p>