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

unwilling-turquoise

5/17/2025

Separate layouts for dashboard and public routes

So im migrating from nextjs and in nextjs i can define layouts separately (routes) -> For public routes (This group has a layout which extends the root layout) dashboard -> For dashboardroutes (This route has a layout which extends the root layout) layout.tsx -> This is the root layout But with tanstack router file base router how can i do the same??...

sensitive-blue

5/16/2025

Hooks proposal

I have written 2 hooks that we've been finding pretty useful at work, I was wondering whether they might be of interest to the community. They're fully type-safe like native tanstack/router hooks (except for route masking because we don't use that, but that's seems doable if needed). The first is useNavigatePreload, it works like useNavigate, but in 2 steps, first to preload, then to actually navigate. ```tsx const preload = useNavigatePreload()...

sensitive-blue

5/16/2025

Hooks in shared component (useParams, useSearch)

Has anyone found a good solution for using type-safe hooks (useParams, useSearch) from components that could be mounted on multiple routes? I'm thinking of writing custom hooks that take an array of from instead of a single from string, but I'd love to know if someone has something better. The basic problem is something like this: ```tsx const Shared = () => {...

stormy-gold

5/16/2025

differentiate navigation due to router.navigate vs browser navigation

Is there any way to determine if searchParams change due to my own call of router.navigate vs the user/browser navigating with the forward/back buttons for example? context: im trying to have my app state represented in the url, and also allow the user to navigate between urls with different search params and load the state appropriately. ...

stormy-gold

5/16/2025

basepath issue

I am trying to deploy to github pages which introduces a mandatory repo name base path in the url. So to account for this i am setting basepath in in createRouter options and also base: in my vite.config.js. the issue im getting is that when i do this, i get a spam of errors, suggesting the app is trying to call react createRoot twice, and the entire app gets duplicated again below (as in, not rerendered twice, but i can actually see two of everything). If i remove the base path properties, then this issue stops happening. any idea how to fix?...

sunny-green

5/15/2025

i know its not the right place

i start to research about tanstack/start and i'm wondering is there any way to set http only cookie with tanstack/start i can't see in the docs

fair-rose

5/15/2025

Using url params for state w/ multiple components on a page

I follow the concept of using url for state in some cases where you refresh a page and want the same filters, sorting etc.. applied, it works great if it was a single table on a simple page. How does (or should it) this approach work on something like a Dashboard page, that may have multiple tables, lists, etc... Ending up with something like ?table1SortBy=...&table2SortBy=... feels weird to me. Thanks for any guidance....

correct-apricot

5/15/2025

Data Loading and Local Pagination

I have a route that fetch a dataset. I want to do local pagination. Is it possible to have child routes sharing parent query? this is base route...

molecular-blue

5/15/2025

Can I redirect AND update the router context within beforeLoad?

For context: My server has the following states: uninitialized & initialized In the beforeLoad of the __root.tsx I use TSQuery to get the serverState and inject it into the router context along with the QueryClient. ...

fair-rose

5/14/2025

Search Params typings not working as expected

I've read the documentation half a dozen times today already, but clearly something is wrong with my understanding. Why the search params for the ReportRoute are not being inferred as expected? It all works, but if try to use, for example:

const search = ReportRoute.useSearch();

const search = ReportRoute.useSearch();

within a given component, search is typed as any. The route tree is as below:...

genetic-orange

5/14/2025

Search params on index.route with '/'

I'm using search params on the index page. '/' is added to the end of the URL. Can this behavior be changed? I want it not to be added. Here's my example: https://stackblitz.com/edit/tanstack-router-famkfjkq?file=src%2Froutes%2Findex.tsx Current behavior: https://[your-stackblitz-url]/?count=0 Expected behavior: https://[your-stackblitz-url]?count=0...

ambitious-aqua

5/14/2025

TSR imports not working as expected

I am trying to integrate TS Router into an electron app, and importing certain functions are giving me weird errors about not expecting args when the docs say clearly that, for instance, createLink accepts an arg for a component. What am I doing wrong here?...

absent-sapphire

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.

correct-apricot

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 });...

correct-apricot

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?...

adverse-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?

adverse-sapphire

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.

wise-white

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")({...

equal-aqua

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...

sensitive-blue

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.

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