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

8/26/2025

Storing a list of urls to be navigated through later

I'm looking for a bit of direction on how to store a list of, ideally, typesafe locations that I can fetch and navigate through. Worst case scenario I just serialize entire LinkProps objects and disable type checking for the line but I imagine there's a better way. I checked all the functions being exported and none of them seemed like they fit the bill, but it must exist where the lib parses the window href into matchable json For context this is a react SPA with no ssr...

flat-fuchsia

8/26/2025

Multilingual URLs

Hey everyone.. Where I work we have a requirement for bilingual URLs (for example /en/about and /fr/a-propos). How easy/difficult would something like this be to implement in TanStack Router? Obviously, the ideal implementation would be a single .tsx file per route, where /en/about and /fr/a-propos both point to (for example) about.tsx. We've successfully implemented this in RRv7, along with a supporting <Link> component that will render the correct URL path depending on the current locale.. but I'd like to explore TanStack Router for new projects....

absent-sapphire

8/26/2025

SingleSPA MFE React Router issue (advise for migration to TanStack Router)

We are encountering issues with React Router and are considering a switch to TanStack Router. The core driver for the migration thoughts is a <Router> inside <Router> error, which feels pretty unavoidable in our SingleSPA, React 19 Micro-Frontend setup with components being exported from one MFE app and used in other MFE apps. The fact that the component is exported from a JS file that also has the lifecycle functions required for the main MFE app trips up React Router 7 and starts throwing an exception. Now, before we hop onto the migration train, does TanStack Router have similar restrictions, such as non-nestable BrowserRouter wrappers, or is it expected to work well with each MFE having its own inner routing and singleSPA orchestrating the MFE's main routes that determine when the mount and unmount of these apps occur? Does anyone have any experience with SingleSpa and TanStack Router that could share some tips?...

like-gold

8/26/2025

Custom Template for File Based Routing?

Is there a way to define what the generated route.tsx / index.tsx file will contain when it is created?

useful-bronze

8/25/2025

Catch all route for showing a modal over existing pages

I use TanStack router folder method (not programmatically). I have the following scenario, I have core routes: /home, /settings, /settings/preferences - as you can see - also deep nested routes. But I might have many core ones. ...

frail-apricot

8/25/2025

Error while using useNavigate hook with react router

Hello guys,I am building a project while learning context api in react js. I have put all my variables and functions in AppContext.jsx, so they can be accessed and manipulated by component according to the need. But in some part of AppContext.jsx , I have used useNavigate hook (which must be used under Router, according to docs) is giving error that "useNavigate() may be used only in the context of a <Router> component ". I don't know how to solve this error, please help me out in this....

xenophobic-harlequin

8/23/2025

Dev workflow for building a pendingComponent?

How do you go about building your pendingComponent? I change pendingComponent to component whilst im developing / designing the loading state, then change it back to pendingComponent when I'm happy. I'm wondering if im missing something obvious?

genetic-orange

8/23/2025

errorComponent not rendering

Hi Guys. Hope you are all good. I have a notFoundComponent and errorComponent defined for a layout with some child routes defined in route.tsx. The notFoundComponent is getting rendered correctly when a route is not found but when an error occurs within those child routes, instead of rendering errorComponent, it's rendering defaultErrorComponent defined in router.tsx which is not the behavior I am expecting. Is this the correct behavior or I am missing something?...

stormy-gold

8/22/2025

How to handle notFound errors based on route param validation?

I have a lot of routes like /posts/$postId where I essentially just call a server function to get the relevant post: ```ts // route export const Route = createFileRoute("/posts/$postId")({...

deep-jade

8/22/2025

React RSC in Router

The React Router folks announced that they will support RSC in both Framework and Data Mode (https://remix.run/blog/react-router-and-react-server-components). Will Tanstack similarly support RSC in their equivalent "modes" Tanstack Start and Tanstack Router (which alone is much like Data Mode).

harsh-harlequin

8/21/2025

Virtual physical routes

In virtual routesphysical('/posts', 'posts'), ``` └── posts ├── route.tsx (layout file not working) ├── index.tsx...

deep-jade

8/21/2025

Router Plugin question

Hi all, I have a situation where I need to rename my async chunks generated from the tanstack router plugin for auto code splitting. I want to protect certain JS chunks on my backend auth via regex/name compared against the manifest, but they seem to be created as ‘[tinyint].[hash].js’, so they lose their nomenclature. I ideally would like to factor in the route name into it so like ‘[route-name].[hash].js’. I’m leveraging Rsbuild currently. Is my only option to opt out of auto code splitting and to manage it out of rsbuild/rspack, or is this configurable via the plugin config? I tried to peek into the package on GitHub but I was sort of getting lost in the overhead....

extended-salmon

8/20/2025

search params appear in `_strictSearch` but not in `search`

Im encountering a problem where my search params show up in the URL as expected, but wont be available using Route.useSearch(). Using the devtools i can see that they appear in the parent routes search, but only appear in the /page route under _strictSearch. Anyone knows how this could happen? ```ts export const Route = createFileRoute(...

vicious-gold

8/20/2025

Errors thrown in `loaderDeps` result in a blank page

It seems that the return value of validateSearch gets re-merged back into the URL, which wasn’t clear in the docs. This isn’t the behaviour I prefer; I never really want to change what the user wrote. Therefore, I’m trying to do validation in loaderDeps, but I found that throw-ing in loaderDeps results in a blank white page with nothing being output to the console. The onError handler does not get invoked. The exception gets completely swallowed. This can’t be the right behaviour?...

causal-orange

8/19/2025

TanStack Router vs Chicane

Hi everyone, wondering if I can get some advice… I’m building a single page application but want a few pages to be pre-rendered (SSG not SSR). I’ve been using TanStack Router so far, but I can’t help feeling like it’s too heavyweight / too much magic (e.g route tree gen). Reading the docs I saw that TanStack Router was inspired by Chicane, and having looked at Chicane it appears to be just what I need if combined with SWR or TanStack Query. Can anyone point me in the right direction for getting SSG working with Chicane?...

gradual-turquoise

8/19/2025

How do you handle two versions of an application?

I'm working on the UI of an opensource backup software using among other things tanstack router, react and vite. We want to create a commercial version of the UI which has 1/ the same routes with different contents and 2/ more routes, only available for the commercial release. For 1/, I can simply rely on a feature flag and on dead code elimination to have a different build between the commercial and the OSS versions. However, what's the best way for 2/?...

absent-sapphire

8/19/2025

Best way to structure /auth layout with shared Lottie animation

Hi everyone 👋 I have three forms in my app: login, send OTP, and verify OTP. I want to show them on three separate pages: • /auth/send-otp...

ambitious-aqua

8/18/2025

Is it possible to have subdomains using Tanstack Router?

Hi Is it possible to have subdomains using Tanstack Router? Or do I need to switch to Tanstack Start and handle redirects in the middleware?...

harsh-harlequin

8/17/2025

DDD routing pattern in monorepo

hi I want to achieve this type of routing in a monorepo (nx.dev) using tanstack router with file based routing ``` my-app/ ├── apps/ │ └── web/ # Main app (thin shell)...

correct-apricot

8/17/2025

Control `shouldReload` from navigate

In my app, I need that if a user is already on a route, clicking on a button or in general triggering a navigation towards that same route won't do anything (no pending component, no loader re-run). I did that by setting to false the shouldReload property on the createFileRoute call (bonus related question: is there a way to set it on the root route, like defaultShouldReload instead of repeating on every route?). This approach works just fine, but now I need to handle the user log in....

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