T
TanStack•17mo ago
continuing-cyan

Declarative search param masking is lagging

I'm trying to use declarative route masking to clean up the url by not showing default search params. Navigating to my list page I want the user to see example.com/list and not example.com/list?page=1&search=&sortBy=date&sortOrder=asc&status=active&.... https://codesandbox.io/p/devbox/tsr-search-masking-question-vcds2n A simplified example is this route mask: 
const pageParamsMask = createRouteMask({
    routeTree,
    from: pageRoute.id,
    search: (prev) => (
        {
            ...prev,
            page: prev.page,
        }
    )
});
const pageParamsMask = createRouteMask({
    routeTree,
    from: pageRoute.id,
    search: (prev) => (
        {
            ...prev,
            page: prev.page,
        }
    )
});
Now when using navigate 
const { page } = pageRoute.useSearch();
<button onClick={() => navigate({ search: {page: page + 1} })}>Next</button>
const { page } = pageRoute.useSearch();
<button onClick={() => navigate({ search: {page: page + 1} })}>Next</button>
the seach state updates correctly, but the url is lagging by one step i.e. clicking next at page 1 brings me to page 2, but the url doesn't update. Clicking next again brings me to page 3 and updates the url to page=2. I would think that the navigation should happen and then the route mask should be applied, but it seems to me like the route mask is being applied before the navigation. How can I fix this/what am I doing wrong? Thank you :^)
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?