How to access ‘this.props.match.params’ along with other props with React Router?

To access ‘this.props.match.params’ along with other props with React Router, we pass in the matchProps from the render prop function into our component.

For instance, we write

<Route
  path="/champions/:id"
  render={(matchProps) => (
    <ChampionDetails
      {...matchProps}
      {...this.props}
      handleMatch={this.handleMatch}
    />
  )}
/>

to add the Route component and pass in matchProps to the ChampionDetails component.

Now ChampionDetails has access to all the properties of matchProps as props.