'How to pass data between components on Different routed pages without putting them on App.js?

I am trying to pass "product" from my Product.js to Cart.js as a prop so that when the user clicks on Add to Cart button the product is transferred to Cart. I use onAdd function on the button to do that(yet to be implemented).

But ı cannot figure out how to pass that prop from Product to Cart without adding those two inside App.js and passing that way. I guess my logic here is suffering from errors. Any help and insight is appreciated. Here is the code;

https://stackblitz.com/edit/react-hk2sma



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source