I am using 13.4.4 with the app router.

Inside my page (server component) I render the contents using a client side component as below:

import { Metadata } from "next";
import PaymentList from "./PaymentList";

export const metadata: Metadata = {
  title: "Payments",
};

export default async function PaymentsList({
  params,
}: {
  params: { accountId: string };
}) {
  console.log("loading payment list page");
  return (
    <>
      <PaymentList accountId={params.accountId} />
    </>
  );
}

Within this component the user can filter a list of data. When filters are selected we update the URL query parameters with router.replace.

The issue I am facing is that when the user clicks a link to this page (rendered with a Link component inside the parent layout), the URL is updated but the page does not reload which means that the previously applied filters are not reset.

For example:

1. Navigate to /payments
2. Filter by date: 2023-01-01 - URL changes to /payments?data=2023-01-01
3. Click the Payments link in the parent layout page
4. URL changes back to /payments
5. Payment List component still has filter applied

Is there a way to force the link in the layout page to not use a cached version and reload the page and it's components?