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

xenial-black

6/26/2025

Problem with navigating to same route

After updating the @tanstack/react-routerfrom version 1.120.13 to version 1.121.34 I have a problem when trying to navigate using to: '.' option in navigate from useNavigate (for Link component works the same). From what I've been able to determine, the router tries to redirect to basepath after calling navigate with to : '.'. I found that this issue was related to that but it doesnt resolve my problem https://github.com/TanStack/router/pull/4472. I prepare some demo to show the problem. To reproduce the issue go to Map and click on button open panel it than redirect you to the index route. https://codesandbox.io/p/sandbox/tanstack-router-bug-example-j4qlpj...

continuing-cyan

6/25/2025

(SOLVED) How to make a custom link with an active className

I've got this component, and I get the following type error when trying to add active props. It's a massive error, looks like AI describes it as a complex union type that I'm not narrowing. This is a modified example from the docs, what's the right way to do this? ```tsx...

xenial-black

6/25/2025

Dynamic Route + Static Match

What would be the best practice to use dynamic routing but also have specific logic for a specific route? For instance, /$branch/$step maintains top level logic and layout, but I want to do something special if route is /foo/*? I was hoping to separate the logic from the /$branch/$step file. I have tried /_foo route but get an invariant error at runtime. Ref. https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#pathless-layout-routes...

extended-salmon

6/25/2025

Unable to navigate within a useEffect

I'm in a useEffect and calling navigate() , but nothing happens. I've tried calling navigate() via useNavigate() and redirect(). The strange thing is that when I save a file to kick HMR, then the navigation kicks in. I am navigating from '/xx/onboarding' to '/x', one level back, in case that has something to do with it. ...

fascinating-indigo

6/23/2025

keepPreviousData with useSuspenseQuery

Hello, I'm using router with query and was wondering if this pattern can be done in a better way: I want to have data available right away on the inital load so I don't need to implement loading screens, but on client navigation I just want to use previous data until the new one is fetched. when using useSuspenseQuery + awaiting ensureQueryData in loader it works that way but since my UI depends on search params when changing route I still see previous params until loader finishes fetching the data. In my case im using a select component like this:...

sensitive-blue

6/23/2025

set route state from loader funtion

Hey is it possible to set router state from loader function in createFileRoute? something like that: ```js...

flat-fuchsia

6/23/2025

Implementing .well-known route (escaping .)

I need to setup associated domains, apple aasa file and this should be served at .well-known/apple-app-site-association. Is there any way for me to include a "." (a dot) in the routing?

wee-brown

6/22/2025

Tearing my hair out... route groups misunderstanding? );

I've read and re-read the docs as well as cloned and looked through the nv-rental-clone demo app from @Sean Cassiere but I can't figure out why my routes with route groups won't render properly.

For context, simple routing stuff was working, but we want to use slugs for some things so I overhauled the structure some to try and use more best practices.

The screenshot shows my current layout....

equal-aqua

6/22/2025

Netlify dev fails when including a spa redirect

My project is a tanstack router react app with vite. In the netlify docs it mentions spa apps require a redirect from /* to index here adding this redirect isnt an issue until you do a local build either with pnpm build, or using the Netlify cli with

netlify build

netlify build

. after building the project the

netlify dev

netlify dev

command crashes the server immediately and the only way to fix it is to dele...

fascinating-indigo

6/20/2025

Would there be interest for adding `sherif` to the tanstack/router monorepo?

It's a high quality, fast tool for ensuring consistency across all the dependencies of a monorepo. https://github.com/QuiiBz/sherif It's as simple as pnpx sherif. No config, no install, doesn't even need node_modules....

optimistic-gold

6/20/2025

How can i display a loading component for a page?

I notice that when i enter a nested url of my app in the browser tab and i go to it, it takes very long time to load the page (because of prefetch etc...). Is it possible to show some short of loading component? (example: nextjs has this loading.tsx) - do Tanstack router have something equalivaten?...

solid-orange

6/19/2025

Tanstack Router and Clerk

I have a React SPA web application with Tanstack Router (file-based routing) and I want to protect the whole app - except the login route I guess - using Clerk (I will later also protect my Hono backend's endpoints but that's for later). Considering Clerk is a partner of Tanstack, I was hoping I could find some "official" examples on how to do this properly, but unfortunately the only resources I could find were for Tanstack Start, and a few old repos with completely different approaches. I would really appreciate if anyone could explain or show me how to do it properly once and for all, so I can use it in all my apps, knowing it most likely follows best practices, is secure, doesn't slow down my app unnecessarily (big concern), etc. Thank you 🙂...

fascinating-indigo

6/19/2025

unmet peer dep issue w/ tanstack/router-cli

There is a minor issue when installing (at least w/ pnpm) ``` ├─┬ @tanstack/router-cli 1.120.18 │ └─┬ @tanstack/router-generator 1.120.20 │ └── ✕ unmet peer @tanstack/react-router@^1.120.20: found 1.120.18...

foreign-sapphire

6/19/2025

Url as /posts/1/comments but folder structure as /posts/comments

Hi, I came across this route structure in the TanStack Router documentation: https://tanstack.com/router/latest/docs/framework/react/routing/virtual-file-routes ...

rising-crimson

6/19/2025

Autocomplete and url typing not working

Hey guys, I installed Tanstack router and made several routes. It works well, except that when I use <Link> or useNavigate(), I don't have url autocomplete and type validation. I'm using react-vite, and the plugin is enabled in first in my vite.config.ts file. ...

magic-amber

6/19/2025

How can I make my URLs readable instead of URL-encoded JSON?

How can I make my URLs readable instead of URL-encoded JSON? Currently getting: ?filters=%7B"status"%3A"active"%2C"category"%3A"api"%7D ...

ambitious-aqua

6/19/2025

Split screen routes

What is the preffered way to create an overview screen of lets say 'events' and a detail screen for said event that shows on the right of the overview when on route /events i want the whole page to show a list of the events. But navigating to an events goes to events/$eventId but is shown next to the overview. what i did now is this folder structure ```...

generous-apricot

6/19/2025

Context and loader data serialization

Hi all, I encountered an issue when trying to put a Set into loader data. It looks like TSR was trying to serialize and deserialize on page reload or something. Is there anything I can use to control how this works? I searched the docs and couldn’t find anything. And does it also apply to context, or other data stored in TSR?

ratty-blush

6/18/2025

Inline styles

I'm building a whitelabel multi-tenant app that gets the tenant colors from an api before render. I found this hacky solution to inject the theme directly on the head of my root component like this: ```tsx function RootComponent() {
const { authState } = Route.useLoaderData() const theme = getTheme(authState) ...

equal-aqua

6/18/2025

Conditional route masking based on path params

Hi, I have a use case where I would like to mask the URL from /app/views/$viewId/feature-x to /app/feature-x when $viewId === 'hidden'. I have tried using the createRouteMask function with the params function, but it masks every route regardless of their $viewId path param. Is it this possible to do using masking, or is there perhaps another feature that covers that case?...

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