Get URL ID in react

Question

Hey I have a question how can we catch the id from url

 onProductClick = item => {
    this.props.history.push(`/product/${item.id}`);
  };

How can we assign this coming id from url to variable in react

This is the place i've planned to catch the id valuer

class ProductView extends React.Component {
 componentDidMount() {
let someVar = this.props.location.pathname.split('/').pop()
console.log('router val ', someVar);}

Please clarify, what is the id you're trying to push and where it needs to come from?.. What do you mean by URL ID? — S.Haviv
– S.Haviv, Commented Mar 14, 2019 at 7:49
@S.Haviv Its like this localhost:3000/product/12 , In product page how can i catch the id(12) — Fed
– Fed, Commented Mar 14, 2019 at 7:50
It seems like you are using react-router, i think you should mention that in your question. So is id a query or path parameter? And exaxctly what is your question. Would you like to read the item.id again some other place in your code? — the_cheff
– the_cheff, Commented Mar 14, 2019 at 7:51
@the_cheff Its like this localhost:3000/product/12 , In product page how can i catch the id(12) — Fed
– Fed, Commented Mar 14, 2019 at 7:52

Raj Saraogi · Accepted Answer · 2019-03-14 08:23:20Z

8

It seems as if you are using react-router, the route in which you want to fetch the id should be added while declaring routes like this. > path="/product/:id" This should be done where you are mentioning your routes and routing a particular component.

Inside the routed component who will find the id in the props mostly with this value. this.props.match.params.id

This may differ depending upon the routing technique but you can log your props and fetch the value with the proper key.

answered Mar 14, 2019 at 8:23

Raj Saraogi

1,9382 gold badges18 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get URL ID in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related