I would like to pass an ID in props to a ponent react I use react-router-dom Here is my app.js file

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

When I go to the next url img / 2, the router sends me the right page, but the id is not present in the props. When I look into react developer tools on chrome, I can see that

<Switch>
 <Route>
  <ponent>
   <Img>
   </Img>
  </ponent>
 </Route>
</Switch>

In the ponent called ponent, I have something in props.match.params.imgId But when I go on the Img ponent, here is what I have as props: imgId: {empty object}

Do you know how to recover the id in parameter?

Thanks :)

I would like to pass an ID in props to a ponent react I use react-router-dom Here is my app.js file

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

When I go to the next url img / 2, the router sends me the right page, but the id is not present in the props. When I look into react developer tools on chrome, I can see that

<Switch>
 <Route>
  <ponent>
   <Img>
   </Img>
  </ponent>
 </Route>
</Switch>

In the ponent called ponent, I have something in props.match.params.imgId But when I go on the Img ponent, here is what I have as props: imgId: {empty object}

Do you know how to recover the id in parameter?

Thanks :)

• javascript
• reactjs
• react-router-dom

2 Answers 2

You should do it like this:

1st: change your Route declaration

<Switch location={this.props.location}>
  <Route exact path="/" ponent={Home} />
  <Route path="/list" ponent={List} />
  <Route path='/img/:imgId' ponent={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 ponent. In your case you can simply render the Img ponent

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

and access the imgId in Img ponent 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 ponent whereas you need to pass the Route's own props like

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