TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

afraid-scarlet

5/14/2025

Can we create a search functionality for searching routes

Using a command input from shadnc ui where you search for your routes then on click it navigates you to that page.

useful-bronze

5/14/2025

Detecting a change in path on location change

I have the following setup: ```tsx const matchRoute = useMatchRoute(); const navigate = useNavigate(); const location = useLocation({ select: l => l.pathname });...

useful-bronze

5/14/2025

Is refactoring global React context provider to a loader bad practice?

I'm currently going through the documentation, and I see that loaded data can be accessed from within components as well. At the moment, I have a React context that loads user profile data as well as localization. Everywhere I need it, I access it using useUserProfile. Does it make sense to refactor this to a loader at root level, and then to access that data from whichever route you're in? Is that bad practice?...

foreign-sapphire

5/13/2025

Runtime route manipulation (Fog of War)

We’re considering TanStack Router as an option for a new architecture build out at my company, but wonder about runtime route manipulation similar to the Fog of War API from React Router v7 (Remix). We’re a sufficiently large organization and would require such a feature to hit our performance targets based on some initial testing. We like TanStack as an ecosystem. Is an API for this on the roadmap at all?

like-gold

5/13/2025

Sentry setup

Hey, i'm using sentry integration but i have an issue that sentry doesn't capture errors thrown from react components. What's the proper way to use sentry's ErrorBoundary? The only way i could get it to catch is if i wrap individual page components with ErrorBoundary but this is sub-optimal having to wrap every page + errorComponent is useless in that case.

fascinating-indigo

5/13/2025

Can't find route.router in loader context params.

in version 1.97.3 , i can access route.router in loader context. but in version 1.120.3 i can't find route.router . does it remove from new version ? anyone help me about this ? ex:
export const Route = createFileRoute("/playground/edit")({...

other-emerald

5/12/2025

How to write the custom hook 'useStateQuery' similar to Nuqs for '@tanstack/react-router'.

I'm working on implementing a useQueryState hook that is similar in functionality to Nuqs but utilizing @tanstack/react-router for handling query parameters. The implementation involves a Parser utility for parsing and stringifying different data types (string, number, boolean) and a hook that syncs state with query parameters. Here is the current implementation: ```tsx...

conscious-sapphire

5/12/2025

Tanstack router loader vs. tanstack query

I am trying to data fetch in tanstack router. when i fetch with router loader with queryClient.ensureQueryData(jobsQueryOptions()) it works but when i filter via input it reload and i lose focus of input again i have to focus to type anther word, BUT when i do same with just tanstack query directly inside component it doesn't have that problem.

optimistic-gold

5/12/2025

Tab layout transitions

Hi, I'm making a mobile app and use tanstack router for navigation (react.js + capacitor). The base navigation is some tabs at bottom of the screen (like spotify for ex). I made slide-right and slide-left transitions, but I would like to do an animation based on the current page. Like, I have 4 pages, I'm on page 2, if I go on Page 1 i want a slide-left animation, if I go on Page 3, i want a slide-right animation....

correct-apricot

5/12/2025

Is it possible to keepPreviousData when using a deferred loader?

I have a case where I'm using a deferred loader, but I want to hang on to the previous data and render a loading overlay on top of my already-rendered page instead of wiping it out completely. I've searched the docs and couldn't find anything that made this seem possible.

foreign-sapphire

5/11/2025

TanStack router crashses when seeing a .glsl file

Hi I'm doing some stuff with .zarr files and geospatial data. I'm loading a package from: https://github.com/carderne/zarr-gl/tree/main, but it seems somewhere between rollup and tanstack something goes wrong. At runtime I'm getting some crash and information in my browser:

Private field '#version' must be declared in an enclosing class

Private field '#version' must be declared in an enclosing class

...

genetic-orange

5/11/2025

File Route Component Best Practices

Hello, I would like to ask if there are any best practices with regard to File Routes/Components Should a route file be a dumb wrapper around a component? Should the route file reference a separate component? If not, should the component inside the route file be named RouteComponenet, or a name similar to the route?...

foreign-sapphire

5/10/2025

Is this use of FileRouteTypes['to'] valid?

Hello, I'm using a Link component and the to prop is dynamic. I get the value of the to prop by calling my getConfigureModeLink function. To ensure the function can only return a valid registered route I have typed it's return type as FileRouteTypes['to'] which is the interface exported from routeTree.gen.ts....

deep-jade

5/10/2025

testing broken after update to 1.120.3

updating 1.115.2 -> 1.120.3 breaks the setup for unit tests described here error stack trace: ``` Warning: An update to Transitioner inside a test was not wrapped in act(...). │...

extended-yellow

5/9/2025

Tanstack router: Not a good experience so far.

My app is extremely simple and almost no code written. "@tanstack/react-router": "^1.114.3", "@tanstack/react-router-devtools": "^1.114.3", "typescript": "^5.7.2",...

genetic-orange

5/9/2025

Is beforeLoad supposed to run in this situation?

Hi! In my __root.tsx file, I check a session against my auth server in beforeLoad so I can update the router context. In a sub route, if I go from /a to /b, is there a way to preserve the context without having to re-run the root beforeLoad hook? (or any parent beforeLoad hook really) For context, my issue is that currently it's very slow because it makes a ton of requests for every page change...

stormy-gold

5/8/2025

change url in address bar without navigating

Hi, I was wondering if there is any way to just change the url in the browser's address bar. No routing, no rerenders. I tired to manually call

window.history.replaceState(null, "", newUrl)

window.history.replaceState(null, "", newUrl)

...

rival-black

5/8/2025

Tanstack router for protected route

Hi can someone help me quickly on this problem. I'm trying to implement protected route but I can't do the structure like the image. Do i have to use flat file routing ?

conscious-sapphire

5/7/2025

SuperTokens integration with Router

Hi! I am looking for a good example of SuperTokens integration with Tanstack Router / Tanstack Start. Anyone have a working example, or could point me in the right direction?

absent-sapphire

5/7/2025

Setting global search params

Hi, so I have this setup ``` export const rootRoute = createRootRoute({ component: Root,...

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs