HI I'm making a simple e-commerce website using: React, class-components, React-router, Redux, and Graphql endpoint.

I fetched the data of products from graphql endpoint and displayed it on the productsListing page. Now I want to make a ProductsDetail page, But I don't know how to pass specific product from productsListing page to ProductsDetail page. I am using React-router v6 for routing.

I was trying to pass the product data using the Link tag, to handle this.props.location.state on the productsDetail page.

products.length &&
      products.map((item) => {
        return (
          <Link key={item.id} to={"/PDP"} state={item}></Link>
          });

But on the ProductsDetail page, when I try to console.log(this. props) there is no location property. and when I try console.log(this.props.location.state) it says "Undefined".

As I think this problem is because I am using react-router v6 in class components.

My question is: Are there any other ways to handle this.props.location in react-router v6 without useLocation hook? If Not, then how to pass a specific product object from one page to another page?

Thank You.