Skip to content

Trying to add a detail product component. React-router

I have a component products which lists every product in the /Productsurl. I’m trying to make another component Detail that displays specific product in the browser. This is the URL I’ve been trying to create Detail/{some id goes here}. The problem is how am i going to know which product clicked, so how am I supposed to show this specific product in the Detail component. I do have a Detail and Productscomponent.

My router is below:

          <Route exact path="/">
            <Home />
          <Route exact path="/home">
            <Home />
          <Route exact path="/Products">
            <Products />
          <Route exact path="/Detail/:int">
            <Detail />

I’m not going to share my Productscomponent since It’s composed 200 lines of code. I’m just gonna share the search svg in my Products that I want it to take me to the Detail/{id}page when I click.

        {, index) => {
          return (
            <div key={index}>
              <div className="card shadow" style={{ width: "18rem" }}>
                  alt="Card image cap"
                <Link className="link" to={"Detail",index}>
                    viewBox="0 0 512 512"
                    <path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>


This is what you will need –

In summary, the :int can be availed in the Detail component as const {int} = useParams();. And while handling the click in the Products component, you will have to pass the product-id as /Details/{productId} using the Link component.

In this manner once the Link is clicked to bring the route to Detail/xyz-product-id, the Detail component will render having that xyz-product-id available as int in the code.