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

rival-black

2/19/2025

Cookie based auth review.

Hi all! I just wanted to confirm if my "solution" works fines, break no rules etc. as it's really important for me. I don't want to make mistake that will cost me a lot in the future. If anyone like, please tell me if my approach is legit, alternatively leave your suggestions please! I'll be grateful. main.tsx: ```tsx const queryClient = new QueryClient();...

stormy-gold

2/19/2025

Setting Up Apple Pay Domain Verification Route in TanStack Start

I'm using TanStack Start, hosted on a VPS with Docker, and I'm trying to set up a route for Apple Pay verification on my staging URL (staging.xxx.ie).
I initially tried placing apple-developer-merchantid-domain-association.tsx inside a .well-known folder but then opted to use createRoute inside __root.tsx.
Current Code: ...

dependent-tan

2/18/2025

You are calling ReactDOMClient.createRoot() ...

Hello, i have a simple setup. Basically i have /login, /admin and / paths When i start the navigation on / nothing happens, but as soon as i go back to "/" from any other page i get this error and it is driving me mad. ``` main.tsx:44 You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it....

rare-sapphire

2/17/2025

Maximum update depth exceeded when redirecting

Hello I have this setup and every time I navigate to /profile I get the error even though the app doesnt crush and there's no problem I just wonder what's the correct way to achieve that redirect ``` export const profileRoute = createRoute({ getParentRoute: () => rootRoute,...

extended-yellow

2/15/2025

How to share a lazy-loaded route across multiple parent routes?

I have three journeys: ```ts const journey1 = createRoute({ getParentRoute: () => rootRoute, path: "/journey1" }); const journey2 = createRoute({ getParentRoute: () => rootRoute, path: "/journey2" });...

rival-black

2/15/2025

Nested Dynamic routes

Hi! It's probably my fault, but I can't find a solution! So my problem is that I have following structure: ``` - posts - index.tsx...

stormy-gold

2/15/2025

Disable ViewTransition in specific routes

with defaultViewReansition set to true globally is there a wa y to opt out in certain pages , in my case it's trigerring every time i change the search query tracking which tab is the current one and it's less than ideal

foreign-sapphire

2/15/2025

help refactoring context with useEffect into layout `beforeload`?

I'm trying to integreate openauth into a router project, and have been at this on and off for a week or so now. i've come up with a solution, but it's suboptimal and involves setting/getting jotai stores outside of react which seems to be generally discouraged. basically there's this example i'm trying to roughly port. some of the things tripping me up, but here's my thought process, and would be deeply grateful to any willing to give some thoughts - there's a bunch of logic happening in a useEffect w/ no deps. this tells me that I would prefer to just pull this logic into a beforeload. i'll pull into __root because, for now, i want auth data accessible at all my pages. - ok, i pull the logic out, but now i need to set some values which, in the example, are state values. i'm not in a component anymore so i need a solution here -> use context to communicate btwn route loader and context...

extended-salmon

2/14/2025

Multiple layout in a route causes layout flash

Hi guys, in the below image is the file structure of my route. The issue is when i am on any route wrapped by _mainLayout trying to route to a route wrapped by _infoLayout, i always get a flash of _mainLayout before _infoLayout will show up. Any idea of how i can fix this will. be appropriated. Thanks...

absent-sapphire

2/13/2025

MDX integration

Does anyone know how to integrate mdx with a tanstack router project? I want to have the flexibility to use markdown files and wrap them with a prose class. I am surprised I can't find any examples of this. Thanks for any ideas.

ambitious-aqua

2/13/2025

URLSearchParams encodes spaces as +, breaking useSearch

I'm doing: ``` const params = new URLSearchParams({ test: "a b: });...

quickest-silver

2/13/2025

How to show spinner when lazy route (js chunk) is being loaded?

Basically I want to have some some spinner when lazy route is being loaded. It is quite usefull for slow connections. Ideally to combine it with loader, so spinner will be shown util route and route data are both loaded. With lodable/component lib I achieved this with:

``jsx
const AsyncPage = loadable(
  props => pMinDelay(timeout(import(

lazy-load/pages/${props.path}.jsx`), 20000), 200),...

adverse-sapphire

2/13/2025

Invalidate route without reseting scroll

In my page I have a button which programmatically invalidate the current route: ``` const handleDelete = async () => { const response = await mutation.mutate(data.id);...

optimistic-gold

2/12/2025

Access react context set in a inner component in loaders

I have some global context that works fine with routewithcontext. I have a container component that provides a context to all child routes. How do i access the context in route loaders?

conscious-sapphire

2/12/2025

Managing some global state from route callbacks?

Is it a bad idea to manage some global state within a routes callbacks? Reason I’m second guessed by this (even though it does what I want) is that loaders can be re-run anytime… so it could cause potential state inconsistencies?

passive-yellow

2/12/2025

How to programmatically navigate to a new tab with useNavigate?

Hi! I'm trying to figure out the best way to programmatically navigate to a route in a new tab using TanStack Router. Currently I'm using useNavigate like this: ```typescript const navigate = useNavigate({ from: ApplicationsRoute.fullPath })...

dependent-tan

2/12/2025

Equivalent to React Router `handle`?

Hi everyone, I'm currently transitioning a project from RR to Tanstack Router and I haven't exactly found an equivalent for the route handle concept (https://reactrouter.com/start/framework/route-module#handle). Baiscally, I need a way to return some component or value from a route and be able to retrieve it further up the tree using useMatches....

ambitious-aqua

2/12/2025

Get fullPath and params from interpolated pathname

Hey everyone, is there a utility exported from tanstack that would be able to tell me based on a list of routes and a pathname, which route said pathname matches? Something like ```ts function findMatch(routes: string[], pathname: string): string const routes = [...

sunny-green

2/11/2025

resetScroll={false} only works on first click

I am super confused here. The first click on one of these tabs works correctly (page doesnt scroll to the top), but all subsequent clicks scroll to the top. Am I doing something wrong? The same was happening when I tested with Link components outside of this Tabs component as well, so I think I've isolated it to not be an issue with this component...

equal-aqua

2/10/2025

Prevent scroll restoration for some links?

Is it possible to prevent scroll restoration for a specific link (not url) i thought resetScroll was able to achieve this, but it does not work as i expected, it always scrolls to the top

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