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

dependent-tan

1/14/2025

.env files in TanStack Start?

Hey folks, how are you managing environment variables (or other env-specific configuration) in TanStack Start? I've always used Vite modes for this (e.g. create .env.staging file and build with vite build --mode staging ) but wasn't sure if this was the right way to do things with TanStack Start or if there's a better pattern? I realize you can manually define env vars with your hosting provider, but it's nice to use .env files for non-secret values (e.g. API base urls, etc) Started discussion here: https://github.com/TanStack/router/discussions/3126...

flat-fuchsia

1/14/2025

Two base-paths with each their own layout and outlets

Hey man, really trying to grasp what concept I am not getting here. I have the following file based routing structure: ``` routes - _root.tsx...

ratty-blush

1/14/2025

Handling Both Dynamic and Index Route in one file

I have a file-based route ```TS import { createFileRoute } from '@tanstack/react-router' export const Route = createFileRoute('/posts/$postId')({...

typical-coral

1/14/2025

Should search parameter changes trigger route loader reloads when not specified in loaderDeps?

Hi, I'm using URL search parameters to manage UI state that doesn't affect route loaders or other routing-related functionality. However, I've noticed that whenever a search parameter changes, the entire route tree refreshes and reloads. I expected the route to reload only when its specified loaderDeps change. Is this the intended behavior? ...

exotic-emerald

1/14/2025

Tanstack router + React: Nx monorepo with module federation using Rspack

Heyo, I have been trying to get TanStack router to run on a React module federated host app inside an NX monorepo that uses Rspack. Unfortunately I can't seem to get the Rspack config with Tanstack to run right since it never generates the routeTree.gen.ts file and of course errors. I have had luck using the Tanstack CLI to generate the routes properly but I would prefer for it to be automated through the bundler instead of having to run another tool alongside the dev env. Here is the current rspack.config.ts file: ```import { composePlugins, withNx, withReact } from '@nx/rspack'; import { withModuleFederation } from '@nx/module-federation/rspack';...

xenial-black

1/13/2025

Im using tanstack router right?

Hi, my first time using tanstack router, i already worked with react router, but right i use next js, but i have an project that i need to use react, so i decided to give a try on tanstack router, and i liked the way it works, but im structuring my code in the right way? should that be done like that? on __root.tsx should i hard code my app header, and styles? can or i should condicional rendering routes links if user are logged in or not? Thank you

eastern-cyan

1/13/2025

is it possible to use tanstack start with code based routing?

if yes how can I disable tree generation?

optimistic-gold

1/12/2025

Is it normal that the search params are stripped when they don't pass the validation?

Quick question : is it normal that tanstack/router removes the search params when they don't pass the validation? I thought I was going crazy but this actually reproduces quite easily on the stackblitz examples. For instance with this: ```ts validateSearch: z.object({ foo: z.number(), }),...

sunny-green

1/11/2025

useActive for nested children

Hi everyone! I'm using TanStack Router, file based routing for the 1st time and have a question. I have a structure that looks like in the image (simplified example)....

optimistic-gold

1/11/2025

useMatchRoute but don't re-render on every state change

One thing (among many) that is awesome about tanstack/router is that most hooks can be used in a way that minimizes re-renders. For example: ```ts const pathname = useLocation({ select: l => l.pathname }) // only re-renders when pathname changes const foo = useSearch({ select: s => s.foo }) // only re-renders when foo changes const router = useRouter() // never re-renders...

dependent-tan

1/10/2025

How to create a child route of an index route?

I want to render an index route (/) and have a child route at /verify that renders a modal. Is there a way to achieve that using file-based routing?

extended-salmon

1/7/2025

Loosing type safety when wrapping <Link>

Anyone have an idea on how to keep type safety while wrapping <Link> in a generic component like so? Right now typescript allows me to provide invalid routes like so <Link to="/invalid"> and I don't like that I loose the type safety. ```tsx import { Link } from "@tanstack/react-router"; import clsx from "clsx";...

afraid-scarlet

1/7/2025

Different routes based auth status

I want to be able to define two different route trees that uses the same base path depending on route status and these two different trees need to merge with the non grouped routes. I can kinda see how to do it with code based routing but is it possible to mix this kind of system with file based routing?

extended-salmon

1/7/2025

Is there a way to get proper search params in navigate without a specific route

In my circumstance my /dashboard route has a modal engine that's basically just a discriminated union of different modal types. Using that I am rendering different types of modals ```ts // def...

xenial-black

1/5/2025

Handle notFound in a component

Hey All, Currently building a dashboard app with Tanstack Start + Query, though I don't think this question is relevant to Start specifically. Is there a way to throw/navigate to the notFound component in a route component (not the loader)? I won't know specifically if the page is a 404 until the query finishes, as I am in an $id route and querying for that specific item. I'd like to throw notFound if the query returns null....

yelping-magenta

1/5/2025

Index route not loading by default

Hey all, I have a pretty simple setup where I've defined a __root.tsx file and an index.tsx (basically following the tutorial) This works fine in dev mode, but when I do a production build, the app loads with a not found. In the tanstack dev tools, The matcher is only matching on __root__ so the <Outlet /> is rendering Not Found. When I click on the "Home" link, it routes to the correct place and everything is fine. ...

fair-rose

1/5/2025

Invariant Failed: _authed to _non-authed Route

I'm running into issues with logging out and redirecting to a non-authorized route. I set my routes up as follows: /_authed/dashboard /_non-authed/login /_non-authed/register ...

optimistic-gold

1/4/2025

Why does `useLocation` re-render before navigation?

Assuming a simple route like this: ```ts export const Route = createFileRoute('/about')({ component: AboutComponent, });...

eastern-cyan

1/2/2025

Has <Link to="." ... /> changed recently? I used to be able to update search this way.

The behavior now routes me to the root "/" layout. I'm able to work around this by grabbing router state by way of useRouterState and dump its respective state's pathname in. Here's an example of the workaround — <MenuItem /> is a lightweight wrapper around <Link/>.
The following used to work with to="." ```...

ambitious-aqua

1/2/2025

I18next Suspense mode with TSR

I am in the process of migrating a project from React Router to TanStack Router and encountered an issue with i18next. In React Router, unwraped suspense behaves more like a loader, meaning navigation does not proceed until all unresolved Suspense throws (e.g., useSuspenseQuery or translations using useTranslation() like t('key')) are resolved. This approach ensures that the UI waits for translations to load before rendering the next route. With TanStack Router, however, the behavior differs fundamentally: navigation occurs immediately, displaying either a blank screen momentarily or the nearest pendingComponent, even when no loader is defined and the routes are not lazy. This reflects a difference in how the two routers handle promises with Suspense....

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