Links don't fully follow `retainSearchParams` and `stripSearchParams`
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
- Use both
retainSearchParamsandstripSearchParamsinsearch.middlewares. - Provide a search schema with a property that has a default value.
- Strip that property if it has the default value.
- Place a link and add a style when the link is active.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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