using redirect factory in `beforeLoad` breaks type inference
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
Using beforeLoad factory with urls like ...entity/$entityId/info, ...entity/$entityId/detail breaks route types inference.
My route config looks like this:
export const Route = createFileRoute('/$companyId/_layout/entities/$entityId')({
wrapInSuspense: true,
component: EntityPage,
beforeLoad: makeBeforeLoadRedirect({
from: '/$companyId/user/entities/$entityId',
to: '/$companyId/user/entities/$entityId/info',
}),
});
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-4u7q7qsv?file=src%2Froutes%2Fposts.%24postId.tsx
Steps to Reproduce the Bug or Issue
- Go to
posts.$postId.tsx - Look that
postIdparam hasanytype - Comment the
beforeLoadcode to fix the error
Expected behavior
I'm expecting that the createFileRoute call should define the types of my configuration and not vice versa.
The solution I found that requires changes in the router codebase is adding NoInfer to the types inside the beforeLoad BeforeLoadContextOptions on line https://github.com/TanStack/router/blob/57bb7950b63e0433f6284f414d2ba73d1452bc37/packages/router-core/src/route.ts#L963
Screenshots or Videos
No response
Platform
- Router version: 1.133.13
Additional context
I've created MRE based on the basic React Query, but my actual use case for this is a bit more complex.
I have an entity page that contain my RouterTabs component that renders an Outlet. Each tab has its separate route like: ...entity/$entityId/info, ...entity/$entityId/detail.
This pattern is common in my project, so I use a beforeLoad factory that allows me to quickly generate a redirect call.
I didn't find it easy to use the typings of FilebaseRouteOptionsInterface in my codebase, but I also didn't find another solution to reuse my redirection logic.
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 with the MRE's posts.$postId.tsx and inspect the beforeLoad factory typing, then read packages/router-core/src/route.ts around line 963 and its BeforeLoadContextOptions type. Verify the change preserves route configuration inference so postId is no longer any when beforeLoad is enabled, while the redirect factory still accepts the shown from and to paths.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100