We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
When using a <Link> component, I expect that using the search prop would update the search parameters in the URL whenever I click the <Link>.
<Link>
search
For example, the code snippet below should increment the page search param in the URL whenever clicked.
page
<Link search={(prev) => ({ ...prev, page: (prev.page ?? 1) + 1 })}>Click me<Link />
This works great.
However, when I add a route mask to the router, the search parameters no longer update on the first click.
const maskSearchUserId = createRouteMask({ routeTree, search: (prevSearch) => { const newSearch = { ...prevSearch }; delete newSearch.userId; return newSearch; }, }); // Create a new router instance const router = createRouter({ routeTree, routeMasks: [maskSearchUserId], });
For reference, here is the search param setup:
import { Link, createRootRoute } from '@tanstack/react-router'; import z from 'zod'; const searchSchema = z.object({ userId: z.coerce.string().min(1).optional().catch(undefined), page: z.coerce.number().min(1).catch(1), }); export const Route = createRootRoute({ validateSearch: searchSchema, ... });
https://stackblitz.com/edit/github-rbjvhp?file=src%2Froutes%2F__root.tsx
?page=1
?page=2
As a user, I expected the URL search params to update whenever I clicked on a <Link> that updates the search parameters.
Here's a demo where I click on the <Link> twice, a few seconds apart.
Notice how the URL only updates the second time.
search: (prev) => { return prev; },
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Describe the bug
When using a
<Link>
component, I expect that using thesearch
prop would update the search parameters in the URL whenever I click the<Link>
.For example, the code snippet below should increment the
page
search param in the URL whenever clicked.This works great.
However, when I add a route mask to the router, the search parameters no longer update on the first click.
For reference, here is the search param setup:
Your Example Website or App
https://stackblitz.com/edit/github-rbjvhp?file=src%2Froutes%2F__root.tsx
Steps to Reproduce the Bug or Issue
?page=1
to?page=2
.Expected behaviour
As a user, I expected the URL search params to update whenever I clicked on a
<Link>
that updates the search parameters.Screenshots or Videos
Here's a demo where I click on the
<Link>
twice, a few seconds apart.Notice how the URL only updates the second time.
2024-07-31.17-37-27.mp4
Platform
Additional context
The text was updated successfully, but these errors were encountered: