Displaying different Component based on the URL that the page is navigated from NextJS

Question

I have two different pages one of them is the store page with products in it displayed with the ProductCard component and the other one is the category page with products, again with the ProductCard component.

What I want to achieve is that when the product(ProductCard) is clicked from the store page I want to display different components on the product page.

How can I get the URL of the page that the product(ProductCard) is clicked on?

const ProductCard = ({ product }) => {
 
  const router = useRouter();

  return (
    <div>
      <div className="itemName">{product.title}</div>
        <Link href={`/${product.url}`}>
          <a>
            <img
              src={product.image}
              alt={product.title}
            />
          </a>
        </Link>
    </div>
  );
};