Default search params from validateSearch do not populate the URL

[efie45]

Describe the bug

When using validateSearch, if you return a default value it becomes available via the useSearch hook in a component, but it does not appear in the URL.

Your Example Website or App

https://stackblitz.com/edit/github-cqxxd6?file=src%2Froutes%2Fabout.tsx

Steps to Reproduce the Bug or Issue

1. Click on the 'about' link

Expected behavior

The default parameter from validateSearch is available via useSearch but does not show in the URL search params.

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome, Edge

Additional context

No response

[ruiaraujo012]

Same thing here, any update on this? I'm having a strange behavior where my validateSearch run link 20 times or more when I navigate to the route (and run about 4 times in other routes)

[amjed-ali-k]

Your Example Website or App

stackblitz.com/edit/github-cqxxd6?file=src%2Froutes%2Fabout.tsx

This link is invalid

[a1eksandrk]

Raising the question. I also encountered this problem when using useNavigate, during validation the default parameters are returned, but they are not substituted in the URL.

[collinosh]

This is our biggest migration hurdle so far. Our users often share links to daily reports/metrics which aren't always opened the same day by the recipient- because the default state is omitted from the URL, there's no way to guarantee state consistency without forcing a redirect to update the search.

Would love to hear if anyone has a better solution, love the type safety of this library but I'm finding myself sinking far too many hours trying to reinvent the wheel.

[PrimaMateria]

I have made the following workaround until it gets fixed. Not nice, but it doesn't leave the URL without the search parameters.

  const navigate = useNavigate();
  useEffect(() => {
    const parameters = new URLSearchParams(document.location.search);
    if (parameters.size === 0) {
      void navigate({ search: defaultSearchParameters, replace: true });
    }
  }, [navigate]);

[bhaugeea]

This seems at least partly related to a new issue I just posted: #1928. Currently it appears that a full page load does populate these values but a router nav doesn't. Meanwhile the full load has other problems but the router nav works fine.

[schiller-manuel]

@efie45 can you please provide the reproducer again? this might be fixed by #1907

[levrik]

This works for me and I would actually like the exact opposite of not having default search params being set in the URL. Was surprised to find an issue complaining about the opposite.

[lukaskoeller]

@schiller-manuel Following up on the already existing discord discussion, I'll link my reproducer again here for completeness: https://github.com/lukaskoeller/tanstack-react-router-useEffect-navigate-reproduction?tab=readme-ov-file#reproduction-2---default-search-params-from-validatesearch-do-not-populate-the-url using v1.45.8

This seems at least partly related to a new issue I just posted: #1928. Currently it appears that a full page load does populate these values but a router nav doesn't. Meanwhile the full load has other problems but the router nav works fine.

This is basically the exact behavior I experience as well

[lukaskoeller]

Another related issue I noticed, is that the <Link> throws a typescript error, that

Property 'search' is missing

although all search params use optional from zod:

export const repro3Route = createRoute({
  getParentRoute: () => rootRoute,
  path: "/repro3",
  validateSearch: object({
    param1: number().optional().default(7),
    param2: string().optional().default("defaultValue1"),
  }),
  component: Repro3,
});

[reihwald]

This issue still happens for me. The different behaviour is strange. @schiller-manuel Have you maybe had the chance to look into this further?

I found something else that I find strange.

Shouldn't const search = useSearch({ from: null! }) and const searchFromLocation = useLocation({ select: (l) => l.search }) always return the same thing?

searchFromLocation seems to mirror what is seen in the url and search seems to always show the correct fallbacks. Here is is quick reproduction stackblitz: https://stackblitz.com/edit/github-2gwkq9?file=src%2Froutes%2Fparams.tsx