NavBar, Pathes and pages

// components/Navigation.tsx

import Link from "next/link"

const NavBar: React.FC = () => {
    return (
        <nav>
            <ul>
                <li>
                    <Link href="/catalog">Каталог</Link>
                </li>
                <li>
                    <Link href="/catalog?categoryId=3">Аксессуары</Link>
                </li>
                <li>
                    <Link href="/catalog?categoryId=14">Парфюм</Link>
                </li>
                <li>
                    <Link href="/catalog?categoryId=7">Уход</Link>
                </li>
                <li>
                    <Link href="/partners">Стать партнером</Link>
                </li>
            </ul>
        </nav>
    )
}

export default NavBar

This is my component, I wrote the navigation bar using Next and TS.
The navigation bar was fine until I noticed that the page was not reloading.
The essence of the problem: navigation proceeds until you click on the link with the query, that is, “Accessories”, “Perfume” and “Care”. After clicking, it naturally goes to this page, but after clicking on another one, only the path changes, and the content remains unchanged. And the page can be seen only after you refresh the page and a new search query goes to the path in the search input.

I have already tried a bunch of methods, and decided to gradually reduce the complexity of the code, in the end nothing worked and I simplified everything and simplified the code in the hope that I might miss some point and if I come to the basics. And now I have already simplified the code as much as possible, the chat gpt does not understand what is happening, just like me.