Hola , estoy creando un sitio web de comercio electrónico simple usando: React, class-components, React-router, Redux y Graphql endpoint.

Obtuve los datos de los productos del punto final de graphql y los mostré en la página de lista de productos. Ahora quiero hacer una página de detalles de productos, pero no sé cómo pasar un producto específico de la página de lista de productos a la página de detalles de productos. Estoy usando React-router v6 para el enrutamiento.

Estaba tratando de pasar los datos del producto usando la etiqueta de enlace, para manejar this.props.location.state en la página de detalles de productos.

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

Pero en la página ProductsDetail, cuando trato de console.log(this. props) no hay ninguna propiedad de ubicación. y cuando pruebo console.log(this.props.location.state) dice "Indefinido".

Como creo que este problema se debe a que estoy usando react-router v6 en componentes de clase.

Mi pregunta es: ¿Hay alguna otra forma de manejar this.props.location en react-router v6 sin useLocation hook? Si no, ¿cómo pasar un objeto de producto específico de una página a otra página?

Gracias.