TanStack / TanStack/router

Links don't fully follow `retainSearchParams` and `stripSearchParams`

Open
#8,309 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

When combining retainSearchParams and stripSearchParams, it seems their effect is inconsistent.

Example:

const SearchSchema = z.object({
  myParam: z.string().default('foo'),
});

export const Route = createRootRoute({
  component: RootComponent,
  validateSearch: SearchSchema,
  search: {
    middlewares: [
      retainSearchParams(true),
      stripSearchParams({ myParam: 'foo' }),
    ],
  },
});

The goal is to keep search params while navigating (e.g. retain global filter states) but not clutter the URLs as long as the default values are still active.

Now const { myParam } = Route.useSearch(); yields "foo", but the parameter is not part of the URL in the browser - so far so good.

But unfortunately Links don't quite follow this logic. They still point to <BASE_URL>?myParam=foo. Consequently a link does not match its own URL and is not show as being active.

Links seem to behave correctly if I use either retainSearchParams OR stripSearchParams, but not with both.

Complete minimal reproducer

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

Steps to Reproduce the Bug
  1. Use both retainSearchParams and stripSearchParams in search.middlewares.
  2. Provide a search schema with a property that has a default value.
  3. Strip that property if it has the default value.
  4. Place a link and add a style when the link is active.
  5. See that the link include the property with default value and is not shown as active.
Expected behavior

I expected the link to not include the property as long as it has the given default value. And that it is shown as active if the URL matches.

Screenshots or Videos

No response

Platform
  • Router / Start Version: 1.170.33
  • OS: Linux
  • Browser: Brave
  • Browser Version: 1.94.121
  • Bundler: vite
  • Bundler Version: 8.0.14
Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the minimal reproducer in src/routes/__root.tsx and run it to observe the Link URL and active styling. Trace how retainSearchParams(true), stripSearchParams, and Link matching process the default search value; done means links omit the stripped default and still match the current URL as active.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.