URL Search Params Persisting on Page Navigation and Masking Not Working

[kyusungpark]

Which project does this relate to?

Router

Describe the bug

Hi, I added a few route masks and it used to all work properly, but now only 1 of 3 works and I can't figure out why the other two aren't working. Only /practice works properly. I also noticed that when i navigate from /practice to /report, it leaves off 2 search params that is not supposed to be in /report page.

Users are able to navigate from: /practice -> /report -> /review

My routes

export const Route = createFileRoute('/_authenticated/(tests)/practice')({
  component: TestRenderer,
  errorComponent: NoAccess,
  validateSearch: (search) => practiceSearchParamsSchema.parse(search),
  beforeLoad: ({ search }) => {}),
});

export const Route = createFileRoute('/_authenticated/(tests)/review')({
  component: ReviewRenderer,
  validateSearch: (search) => reviewSearchParamsSchema.parse(search),
});

export const Route = createFileRoute('/_authenticated/(tests)/report')({
  component: ReportRenderer,
  validateSearch: (search) => reportSearchParamsSchema.parse(search),
});

My masks

const testMask = createRouteMask({
  routeTree,
  from: '/practice',
  to: '/practice',
  search: true,
});

const reviewMask = createRouteMask({
  routeTree,
  from: '/review',
  to: '/review',
  search: true,
});

const reportMask = createRouteMask({
  routeTree,
  from: '/report',
  to: '/report',
  search: true,
});

/practice works properly

/report page - not masked

• also notice that search params from previous page (practice) is persisted.
• You can see in the devTool that it shows 3 search params, but in the url, there are extra that is not specified
• Devtool shows that the route is masked, but it's not

/review page - not masked, but search params from /practice is not persisted

Your Example Website or App

n/a

Steps to Reproduce the Bug or Issue

n/a

Expected behavior

1. I would expect search params to not persist between pages.
2. I would expect route mask to work properly.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[schiller-manuel]

Can you please provide a minimal complete example, e.g. by forking one of the examples on stackblitz?

[kyusungpark]

Can you please provide a minimal complete example, e.g. by forking one of the examples on stackblitz?

I created one here. LINK I was able to replicate the same behavior.

1. On Home page, click button to go to /practice
2. Notice that /practice route is masked correctly
3. Now click on button to go to /report
4. Notice that route is NOT is masked, there is extra expiresAt search params that is not supposed to be there. This is seems like it's persisting from /practice URL. The Devtool shows that current URL is masked, but it's not. The devtool also shows correct search params for /report, but the actual URL bar shows persited expiresAt from previously masked route (/practice)

[kyusungpark]

@schiller-manuel any updates?

[schiller-manuel]

no, you would have seen any update here :) if you want to contribute a fix, feel free to create a PR. also reach out on discord for further discussion

[wrspada02]

Hi there @kyusungpark @schiller-manuel !

I'm going to contribute to this issue. As soon as I can I'll be opening a new PR to fix this out.

Thanks in advance.

[NajmZaga]

Any news on the fix guys !!!!

[wrspada02]

Hey guys!! Hope you're doing good

Sorry for replying SO late. I finally got some time to run this issue. Thank for y'all patience so far

Hopefully I'll be able to open a new fix soon (this week or next)

[wrspada02]

@kyusungpark Ended up by using params: true rather than search: true. For more information, follow up doc link

My stackblitz link: https://stackblitz.com/edit/tanstack-router-3dfgatze?file=src%2Fmain.tsx

Please, let me know if that helps

const testMask = createRouteMask({
  routeTree,
  from: '/practice',
  to: '/practice',
  params: true,
});

const reportMask = createRouteMask({
  routeTree,
  from: '/report',
  to: '/report',
  params: true,
});

Record with new behavior:

https://github.com/user-attachments/assets/e9cb46f8-c796-436f-bff7-615f4d85754d