Pass id as props in react-router-dom

You should do it like this:

1st: change your Route declaration

<Switch location={this.props.location}>
  <Route exact path="/" component={Home} />
  <Route path="/list" component={List} />
  <Route path='/img/:imgId' component={Img} />
</Switch>

2nd: you should access the prop from match injected by react-router like in this example

const Img = ({ match }) => (
  <div>
    <h3>IMAGE ID: {match.params.imgId}</h3>
  </div>
);

but of course you can easily adapt that code into your own.


You would use the functional callback pattern in case where you want to pass some props other than router props to the component. In your case you can simply render the Img component

<Switch location={this.props.location}>
   <Route exact path="/" component={Home} />
   <Route path="/list" component={List} />
   <Route path='/img/:imgId' component={Img} />
</Switch>

and access the imgId in Img component like this.props.match.params.id.

However to point out the problem in your current code, it doesn't work correctly because you are trying to pass the parents match props to the Img component whereas you need to pass the Route's own props like

<Switch location={this.props.location}>
    <Route exact path="/" component={Home} />
    <Route path="/list" component={List} />
    <Route path='/img/:imgId' component={(routerProps) => <Img imgId={routerProps.match.params.imgId}/>} />
</Switch>