verbal-lime

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

example.com/list

and not

example.com/list?page=1&search=&sortBy=date&sortOrder=asc&status=active&...

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 :^)

TanStack•2y ago

verbal-lime

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

example.com/list

and not

example.com/list?page=1&search=&sortBy=date&sortOrder=asc&status=active&...

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>

Declarative search param masking is lagging

Similar Threads

Declarative search param masking is lagging

Similar Threads

Similar Threads

Similar Threads