URL Search Params Persisting on Page Navigation and Masking Not Working
Nobody has claimed this yet.
- 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
/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
- I would expect search params to not persist between pages.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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