I am currently working with Next.js version 14, utilizing the App router and the Link component from Next.js's next/link. In my file structure, within folder app/a, there are:
- page.tsx which fetches data from an API and passes it to the
<Table/>component... - Table.tsx, a client-side component with
"use client". The table component is entirely client side due to my use of Mantine's tables.
On localhost:3000/a, I have a table that displays data fetched from an API. One of the columns in this table contains links (Link) with their hrefs set to localhost:3000/a?param=x. Clicking on these links should filter that column in the same table. However, when clicking the link, the URL in the browser's address bar updates correctly but the page does not reflect the change. Strangely, refreshing the page with the new URL shows the updated and expected table content. Opening the link in a new tab also displays the correct data.
Upon inspecting my VSCode console, I noticed that the API is successfully being called with the parameter when the links are clicked. Interestingly, when a link is clicked, GET /a?param=x is not logged in the console. But upon refreshing the page (now containing the link's URL), GET /a?param=x is indeed logged, and the correct data is displayed.
This issue only seems to occur for links within /a leading to /a?param=x, and not when navigating from /a to /b.