Get URL parameter from url query

Question

Goal: Retreive Id from URL

I have a feed of products with the following code:

  <Router>
        <Header />
        <Switch>
          <Route exact path="/" component={Feed} />
          <Route exact path="/" />
          <Route
            exact
            path="/product/:productId"
            component={DetailProductPage}
          />
        </Switch>
      </Router>

Here is my feed code:

  <div className="feed">
      <div className="feed__cards">
        {products.map((product) => (
          <ProductCard
            image={product.image}
            brand={product.brand}
            name={product.name}
            id={product.id}
          />
        ))}
      </div>
    </div>

And the ProductCard component that creates the URL:

<div className="productCard__container">
        <img src={image} />
        <h1>{brand}</h1>
        <h2>{name}</h2>
        <p>{id}</p>
        <p>{<a href={`/product/${id}`}>View</a>}</p>
</div>

When I click on an individual product, I'm redirected to the individual product page:

function DetailProductPage({ id }) {
  const productId = { id };

  return (
    <div>
      <h1>Product page</h1>
      <p>{id}</p>
    </div>
  );
}

When I go this route, I get a URL with the product parameter: (e.g., http://localhost:3000/product/6CeJGSm7dBTABs8rRBJh)

How do I query for the 6CeJGSm7dBTABs8rRBJh part of the URL and put it into a variable?

Nitsew · Accepted Answer · 2020-09-29 20:58:12Z

1

I assume you are using react-router-dom for this. There are a few ways you can retrieve this value from the URL, but the simplest approach with the provided code would be to use the useParams hook like so:

import { useParams } from 'react-router-dom';

function DetailProductPage({ id }) {
  const { productId } = useParams();

  return (
    <div>
      <h1>Product page</h1>
      <p>{productId}</p>
    </div>
  );
}

More info here: https://reactrouter.com/web/api/Hooks/useparams

answered Sep 29, 2020 at 20:58

Nitsew

3,6821 gold badge19 silver badges21 bronze badges

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

Comments

d-dripz · Accepted Answer · 2020-09-29 20:58:02Z

0

Look like the follwoing code grabs the product id from the URL:

const params = useParams();

answered Sep 29, 2020 at 20:58

d-dripz

851 silver badge7 bronze badges

Comments

Dawid Gałecki · Accepted Answer · 2020-09-29 20:59:22Z

0

While exporting component, you need to use withRouter to get access to this parameter:

import { withRouter } from 'react-router-dom';
export default withRouter(ComponentName);

Your parameters are in props now. In you case:

const productId = props.match.params.productId;

or (using destructuring):

const { match: { params: { productId } } } = props;

answered Sep 29, 2020 at 20:59

Dawid Gałecki

721 silver badge8 bronze badges

Comments

Thanasis Balatsoykas · Accepted Answer · 2020-09-29 21:03:37Z

0

You can parse the url by using the Url object provided by javascript.

To get your current location you can use

window.location

So by combining Url and location

let urlArr = new URL(window.location).href.split('/');
console.log(urlArr[urlArr.length - 1]);

This will log 6CeJGSm7dBTABs8rRBJh

answered Sep 29, 2020 at 21:03

Thanasis Balatsoykas

1761 silver badge11 bronze badges

Collectives™ on Stack Overflow

Get URL parameter from url query

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related