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

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

like-gold

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?

constant-blue

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

absent-sapphire

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?

fascinating-indigo

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

flat-fuchsia

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

rising-crimson

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

sunny-green

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

xenial-black

1/4/2025

Why does `useLocation` re-render before navigation?

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

xenial-black

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="." ```...

other-emerald

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

stormy-gold

1/2/2025

Dynamic Route Generation with TanStack Router for External Components

Question:
I aim to create a component that can be imported as a package and included in a route, which will then generate its own nested routes. For instance, when adding an editor component, it should automatically support the paths it comes with. Here is my typical setup using React Router: ...

wee-brown

1/2/2025

Why does my form default value not re-render?

```js export const Route = createFileRoute('/product-backlog/task/edit/$taskID')({ component: EditTask, loader: ({ params }) => { return fetchTask(params.taskID)...

deep-jade

1/2/2025

How can I design typesafe callback urls?

I currently have this pattern for my auth routes: ``` const schema = z.object({ callbackUrl: z.string().optional(), });...

automatic-azure

1/1/2025

How to handle authentication (get session data)

My knowledge on this has atrophied. 😩 With NextJS I'm so used to having async as the default. Now that I'm with Tanstack Router this isn't the case (as of now). I'm struggling how to use ```...

ratty-blush

1/1/2025

Has anyone gotten TanStack Router/Start to work on Cloudflare Worker with bindings (NOT PAGES)

Cloudflare pages will be merging to workers, so want to know if this is something we can accomplish today

genetic-orange

12/31/2024

Nested layouts work in flat but not directory based syntax

so i have routes like this that work fine: ``` src/ ├── routes/...

correct-apricot

12/31/2024

Vitest renders App but not the Outlet content for "/"

Can somebody point me in the right direction here? Experimenting with TanStack Router and Unit Tests for UI. Works partially but does not render Outlet for the "/" Route. ...

sunny-green

12/30/2024

Link + Pagination + Search Prop + Shadcn/UI

Hey there, I'm trying to build the pagination for my app and I struggle more than I should. 😅 I use the pagination components from Shadcn/UI and I replaced the a element from PaginationLink with Link from @tanstack/react-router....

extended-salmon

12/29/2024

advice on filesystem routing

is there a way to achieve this posts structure from the docs without having both a directory named posts and a posts.tsx ideally I could have something like posts/ with a layout.tsx and then also index.tsx and $postId.tsx. not having everything post-related contained within the posts directory itslef feels confusing to me.

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