Page 404 does not work with the Link component

[sawa-ko]

Currently I have a link with the Link component, which leads to a page that receives a path parameter.

The path parameter is validated by an api to get an object, otherwise it returns a notfound error. The path with the erroneous parameter displays the error page correctly when the url is entered from a new window, but when it is accessed through the Link component, nothing happens. It just changes the browser url but nothing else happens.

What can it be? I attach the code of how it is structured.

// Link
<Link key={`generate-report-${item.id}`} params={{ reportName: item.name }} to={'/dashboard/reports/$reportName'}>
   Generate
</Link>,

import { createFileRoute, notFound } from '@tanstack/react-router';

import ReportViwer from '../../../components/shared/report-viewer';

export const Route = createFileRoute('/dashboard/reports/$reportName')({
  component: Page,
  loader: ({ params: { reportName } }) => {
    const reports = ['TestReport'];

    if (!reports.includes(reportName)) throw notFound();
  },
});

function Page() {
  const { reportName } = Route.useParams();

  return <ReportViwer reportName={reportName} />;
}