Currently, I am facing an issue with the popover menu in my header that displays products. The problem arises when I click on a product in the list; it navigates correctly to the path "products/some-product" regardless of the selected item. However, if I am already on a product page and try to navigate to another product, it appends "products/" again to the URL resulting in "products/products/some-product".
I am utilizing Next.js 11 and Link for navigation.
Below is a snippet of the code responsible for handling the list of products:
<div>
{products.map((item) => (
<Link href={`products/${item.href}`}>
<a
key={item.name}
>
<div>
<item.icon
aria-hidden="true"
/>
</div>
<div>
<p>
{item.name}
</p>
<p>
{item.description}
</p>
</div>
</a>
</Link>
))}
</div>
To manage all the products, I have created a menuData.jsx component where I store product information. Here's an example from the menuData.jsx file:
export const products = [
{
name: "some-product",
description:
"Some description",
icon: CheckIcon,
},
]
Can you help me identify what I might be doing wrong? :)