react-query-questions
solid-query-questions
table-questions
virtual-questions
router-questions
react-charts-questions
ranger-questions
vue-query-questions
svelte-query-questions
bling-questions
form-questions
angular-query-questions
start-questions
db-questions
start-showcase
router-showcase
đź“Ł-announcements
Is it okay to use the private "url" property on router.buildLocation()?
I use router rewrites to convert paths such as
/app/workspace to be re-written to a subdomain such as app.mydomain.com/workspace I need to occasionally generate external urls for emails that use routes from my app. When I call buildLocation({ to: "/app/workspace" }) tanstack router correctly re-writes my url and populates a property called url in the ParsedLocation type. But this property is marked as private?
https://github.com/TanStack/router/blob/04671971ad7b8ee97449a993207ba2edf9d1f2ee/packages/router-core/src/router.ts#L1149
```...Meta title template
Is there an easier way to do this templating thing with
<title>?
``tsx
function getPageTitle(title: string) {
return ${title} - Dashboard`
}...optional param with required param route question
I have this folder structure
```
a/
index.tsx
route.tsx...
Migration from 1.120.11 to latest and back causing routetree.gen.ts generation problems
Migrated a project with https://github.com/TanStack/router/releases/tag/v1.120.11 version to latest https://github.com/TanStack/router/releases/tag/v1.134.12 which caused a certain route to mismatch and not render. Reverted back and put explicit old version in package.json but on local dev server it seems to always generate based on the newest. I've deleted node modules, package-lock.json and routetree.gen.ts itself.
Is the only thing next to just delete repo locally completely and pull it again?
Thanks in advance 🙏...
invalidate not rerunning loader
I'm having a weird issue, all the information i've found suggests it should work but it doesn't. I want to run the
loader using router.invalidate() but I can't get it to actually run the query again.
The following page loads data and sends it to the form component, once the user saves some data I want to invalidate the data so it's reloaded. I do this as suggested by router.invalidate() from useRouter() but nothing happens.
```typescript...Authenticated directory routes - unable to get it to work
We had file based routing for the longest time. Now with the ever increasing amount of new routes we'd like to refactor into some directories instead. For a basic example we used to have
```
_auth.tsx
_auth.dashboard.tsx...
beforeLoad - i guess we need beforeLayoutLoad
Hey folks đź‘‹
I really enjoy how beforeLoad works in TanStack Router — especially how its return values are merged into the match context.
However, I sometimes wish there was something like a beforeLayoutLoad hook.
It would run under the same conditions as loader (meaning parent layout’s beforeLayoutLoad wouldn’t re-run when traveling under the same layout), but it would behave just like beforeLoad — i.e., its return values would merge into the context and be accessible by children....
Invalidating using query client
Hi, I am using query client as a cache management with a router but having such a loader and using data from it with
useLoaderData doesn't work with queryClient.invalidateQueries -> simply it's ignored (I guess becuase I use this data as: const twoFa = useLoaderData({ from: "...." }) and queryClient doesn't know tht this query is ever used so it doesn't invalidate it.
One possibly solution for this is instead of consuming the data using useLoaderData is consuming it using useQuery but then we lose typesafety - queryClient doesn't know that we ensured that the data is there. What's the preffered way of doing that?
```ts...Noticeable lag when trying to open modal with search params?
In my current setup toggling a modal with search params has a very noticable lag. My page is very heavy thousands of objects but I still wonder what is going on in the background to cause a ~500ms lag.
```ts
function RouteComponent() {
const { user } = Route.useRouteContext();...
Navigate to a RouteMatch
Hello folks. First of all, thanks for the amazing work on the library.
I have an app that has a context/project switcher dropdown that allows you to navigate between projects. The behaviour is as follows, given that the user switches to project "b" from "a":
/projects/a/users/abc -> /projects/b/users...
Freeze + Crash when trying to setup Authenticated Routes.
problem.
I have a Vite + Router + Query + Start application and I am trying to setup authentication on it. I've followed how to setup authenticated routes guide. For some reason the application freezes on "Loading" & If I comment out loading, it immediately crashes. Even
useEffect() from my useAuth.tsx() hook doesn't execute to update the auth state whoes job was to invalidate isLoading that renders "Loading". I'm not really sure what I'm doing wrong. Please help! This is my first time using Tanstack Router.
code.
My router.tsx looks like this,...is it possible to create a type-safe utility for beforeLoad?
i'm trying to create an Effect wrapper for beforeLoad (and maybe others). Basically there's just some reusable logic that i want in a wrapper, then i can just provide that directly to the beforeLoad property. i have it mostly figured out, but am unable to get inference of the function arg
e.g. (remove the effect piece for simplicity)
```ts
export function runFunction<TOptions>(fn: (options: TOptions) => unknown) {...
Returning not found for invalid path params
I'd like to return a 404 error when a path parameter is invalid. I've tried doing this by throwing notFound from the params.parse function, but this just gives a generic 500 error. Is there a way to do this?
Example code (I want this to return 404 for /test/abc):
```...
States in url
Hey,
I have a page with 3 "tabs", when you change tab it just slides a part of the content to show the corresponding tab. Now I would like to save several states of the page into URL to allow navigating to this specific tab. For the moment it work for the base value of those states, but I would like to update the URL to match the state changes.
I'm thinking of implementing it using the router and outlets, but i'm not sure if I can re-create the same behavior. Like I can scroll horizontally with a finger to move from tabs to tabs. I don't visualize how could I do this with an outlet.
Otherwise, is it okay to update the URL without actually changing any router page or smthing ?...
Invariant failed: Could not find an active match from "/register"
What am I looking out for here?
I have (authenticated) and (auth-pages) routes.
in (auth-pages) i have /register.tsx...
Getting TS error `xyz is not assignable to type '"Function is not serializable"'` from `beforeLoad`
I've been trying to implement the code pattern shown here like this:
```ts
export const getAllTodos = createServerFn().handler(async () => ['ToDo 1', 'ToDo 2', 'ToDo 3'];
...
Discussion about ToOptions Interface: How to `params`, `from` and `to` play together?
@Manuel Schiller, would be good to have your input on this, because you were also the one providing me feedback on https://github.com/TanStack/router/issues/5582#issuecomment-3455690810
I went through the docs and got the impression that docs are already quite comprehensive - I think I'm just missing a few more examples here and there.
I found the following guidelines - although maybe too inconspicuous:...
React Router Devtools still include in vite build ?
is there anyway to remove router dev tools from vite build ?
How to use ValidateLinkOptions to type a React Aria Component MenuItem that uses createLink?
Hi - I have been really struggling to get types to work correctly when creating a wrapper around a RAC
MenuItem component. The docs say to use ValidateLinkOptions when passing link related params...the issue is that createLink returns the actual type of the component instead of converting it to an anchor tag, which means I get DOM event mismatch errors when spreading the props on the "link" such the one below since the original MenuItem component is a div...
Type 'MouseEventHandler<HTMLAnchorElement> | undefined' is not assignable to type 'MouseEventHandler<HTMLDivElement> | undefined'...here is the example i was going off from the docs but combined with RAC and
createLink. And here's a stackblitz playground that uses this code for convenience: https://stackblitz.com/edit/github-utepv35x?file=package.json,src%2Fmain.tsx,src%2Froutes%2Findex.tsx...