Getting warning regarding Link component

[kaustubh2525]

so i am rendering a data table and using tanstack's link component and as soon as i navigate away from the current page the warning shows

i have actions like this

where on hover i get a dynamic path segment like such

and then on the data table i use link component as such

then when the data table gets fully rendered and i simply just navigate away to another location then it warns me of some match that it couldn't find

[nlynzaad]

Hi @kaustubh2525,

There was a fix pushed for it recently in #4610 and was released in 126.2. Please check if all your package is up to date, you might need to delete your lock file and node_modules and install the latest packages to ensure all is updated.

If you are still experiencing an issue, could you please open an issue with a minimal reproduction so I can investigate.

[kaustubh2525]

@nlynzaad Thanks for the quick reply, as it turns out my package was not updated at all and i did try to query this issue on web but couldn't found the right one which is why i raised a discussion. But any ways thanks for you help.

[vbeffa]

I am running into this issue. It seems to be a combination of using useQuery, pagination, and trying to save the current page and currently selected item in the URL using navigate. When I navigate to other pages using a Link, I get inconsistent behavior. Sometimes the link works, and sometimes I get the Could not find match for from warning. However, when I get that, clicking the link a second time works. I tried creating a small reproducible test case, but when I stripped everything down I was not able to reproduce it. Here is the relevant code. If there's anything that looks off, please let me know.

My route:

type CompanySearch = {
  page?: number;
  companyId?: number;
};

export const Route = createFileRoute('/companies/')({
  validateSearch: (search: CompanySearch): CompanySearch => {
    return search;
  },
  component: Companies
});

Relevant code from my Companies component:

  const navigate = useNavigate({ from: Route.fullPath });
  const { search } = useLocation();
  const [page, setPage] = useState<number>(search.page ?? 1);

  const { companies, error, isPending, isPlaceholderData, companyCount } =
    useCompanies({ paging, filters });

  const [companyId, setCompanyId] = useState<number | null>(null);

  useEffect(() => {
    if (search.companyId) {
      setCompanyId(search.companyId); // intended to handle clicking back/forward
    } else if (companies?.[0]) {
      setCompanyId(companies[0].id); // intended to set the selected company to the first when navigating between pages
    } else {
      setCompanyId(null); // intended to clear the selected company if the search filters (not shown) do not produce any results
    }
  }, [companies, search]);

  useEffect(() => {
    navigate({
      search: {
        page,
        companyId: companyId ?? undefined
      }
      // replace: true // uncommenting this does not affect the behavior
    });
  }, [companyId, navigate, page]);

[nlynzaad]

@vbeffa where are you trying to navigate to? If you are trying to reload the current url with updated search parameters you can use to=".", note the implications of specifying from path in useNavigate in relation to relative links.

Please log an issue should this persist and your able to recreate the issue in a minimal reproduction.

[vbeffa]

With clicking the Link I'm trying to navigate to different pages on the site, with separate Routes and components. Is that what you're asking about? I tried

  useEffect(() => {
    navigate({
      to: '.',
      search: {
        page,
        companyId: companyId ?? undefined
      }
      // replace: true
    });
  }, [companyId, navigate, page]);

but it didn't have any effect.

I will keep playing around with it and see if I can reproduce it minimally.

[vbeffa]

I also just saw a Error: Maximum update depth exceeded message in the console pointing to

if (search.companyId) {
  setCompanyId(search.companyId); // intended to handle clicking back/forward
}

in the useEffect, so it seems that's problematic, or at least in combination with checking companies in the same useEffect.