Url Parameters not able to recieved in component in react Js when Passing Props with Route

Question

I am passing a props( props of all the details of items from which I will select a product baased on the ID received from URL ) into ItemDetails component and I want to display product according to the item Id which is passed through the URL. unfortunately I am unable to use this.pops.match.params in ItemDetails components I am not understanding why its not reviving the URL parameters can anyone help?

This is how I am passing props to the Component.
<Route exact path='/item/:id' component={()=><ItemDetail itemsData={this.props.itemsData} />} />

Answer 1

Oh I see. One of the issues is that on yow route you have it like: item/:id which I believe :id is dynamic. Now u see it, if you are not going to receive the same exact value. The exact should be remove.

Other thing that puzzles me is the way you set the component prop, why is it an arrow function and not a reference component={ItemDetail}. If you want to use it as an arrow function the callback gets a parameter call props or any name you want, but it comes the with the props. So you need to spread them:

<Route path=“my-path” component={props=> <ItemDetail {...props} />