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

correct-apricot

1/19/2025

Dev-only route

Is there a declarative way to configure a TSR file-sys route as development only? I'll often keep a scratch route for prototyping, etc., and w/ RR it was straight-fwd to conditionally add the route if dev env. TSR promotes file sys routing so I'm using it but requires some other means to enable/disable the route.

extended-salmon

1/19/2025

What's the best way to validate path params?

Let's say I had the route: '/read/$language' And I wanted to validate that the $language path param was of a certain type (like type Language = "English" | "Spanish" ) or throw/fallback/redirect. ...

correct-apricot

1/18/2025

Breadcrumbs and sub-routes

Hi everyone I'm trying to create breadcrumbs using the Tanstack Router hooks but I'm facing a problem If my route is: ``` |- admin...

distinguished-silver

1/18/2025

_index.tsx layout?

am I doing something wrong or is it not possible to add layout to index.tsx using _index.tsx? would be cool to keep the layout in the same dir as the route itself...

harsh-harlequin

1/17/2025

Passing context from child page to parent

I tried with this solution but not working, any idea? Thank you for take a look 🙏...

evident-indigo

1/17/2025

Can't install tanstack router scaffolding with npm create @tanstack/router@latest

I'm not using react 19 + isn't this supposed to set up a new project? Not sure why there would be a dependency issue. Been struggling with this for a while now...

message.txt

absent-sapphire

1/16/2025

useMatches with breadcrumbs and search view

How can I keep the search: {view: "view2"} in useMatches() when I create breadcrumbs? I create breadcrumbs by using loader: () => ({crumb: "test"}) But when I navigate to a new path, I am able to navigate back to where I came from, but the search param is gone....

fair-rose

1/15/2025

How to use Tanstack Router with Playwright Component Testing

Im trying to migrate a project to Tanstack Router and can't figure out how to use it in playwright component tests. Has anyone successfully done this before?

stormy-gold

1/15/2025

How would you translate this to directory routes ?

Hey I have these flat routes: ``` - _root.tsx - companies.$id.agents.create.tsx - companies_.$id.agents.tsx...

harsh-harlequin

1/15/2025

Questions about where to put database queries, seeing different wants in tutorials

New to Router/Start, coming from a Remix/RR7 background. There might not be a right or wrong answer, but I'm looking for the proper way, the intended way to do this. Here is a route loader from the docs.

// routes/posts.tsx
export const Route = createFileRoute('/posts')({
  loader: () => fetchPosts(),
})

...

adverse-sapphire

1/15/2025

Tanstack router Pathless Routes validation with parameters

Say I want to create a pathless route for something for a specifc layout / page to do datafetching based of a url param. How would I do this and keep type safe. Is there a way to sepcify that this pathless route is only run on a specific route? Say you have /:id/dashboard/ for example. Is their a way that I can say I want this pathless route to only run on /:id/$ for example so I could access the :id in the pathless route safely?...

afraid-scarlet

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

unwilling-turquoise

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

deep-jade

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')({...

fair-rose

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

extended-salmon

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

ratty-blush

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

flat-fuchsia

1/13/2025

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

if yes how can I disable tree generation?

plain-purple

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(), }),...

extended-salmon

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

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