TanStack / TanStack/router

URL Search Params Persisting on Page Navigation and Masking Not Working

Open
#2,337 10 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

information needed
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

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
Screenshot 2024-09-13 at 8 26 04 AM

/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
    Screenshot 2024-09-13 at 8 26 29 AM

/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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the /practice → /report → /review navigation with the supplied route and mask configurations, then inspect the search parameters and mask state at each transition. Done means search parameters do not persist between routes and each route mask behaves as expected.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.