Url 当使用路由传递道具时，React Js 中的组件无法接收到参数

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} />