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

adverse-sapphire

1/21/2025

Validate Location State

Hi guys, quick question. How can I validate the location.state object on the route like validateSearch? I looked in the documentation but I couldn't find an answer....

foreign-sapphire

1/21/2025

Does Start & Router remove the need for something like TRPC?

I am trying to think through what would still be the use case of using TRPC with react start. What is everyone's opinion on this?...

fair-rose

1/20/2025

Link `to` prefix helper and typescript

My application supports a single to have access to multiple teams. Almost all links in the application will be links to the same /team/$slug prefix. I am trying to build a Link helper but I am struggling in navigating the types to play nice with my component. Any direction would be appreciated. Example component: ```typescript import { Link, LinkComponentProps } from "@tanstack/react-router";...

fascinating-indigo

1/20/2025

Route matching with a prefix?

Hi, is this possible to define a route like /@$username in tanstack router?

fascinating-indigo

1/20/2025

authenticated routes

I am implementing authenticated routes and was following the guide in https://tanstack.com/router/v1/docs/framework/react/guide/authenticated-routes#authentication-using-react-contexthooks where it talks about authenticated routes for auth state stored in a Context. It all makes sense but I'm struggling with one thing - My setup My react Context gets the state for whether the user is authenticated or not by making an api call to /user and if the response is valid and the user details are fetched successfully, it stores that state in the context as user. This is the state I am using to validate whether the user is logged in or not. ...

correct-apricot

1/20/2025

How do I use Non-Nested Routes in File-based router?

I'm building an application where we want to keep a lot of information as path params. Mostly there is no route nesting. All of the routes are supposed to render directly after our auth layout. While we are at 1 level of nesting everything was working well with the _ suffix. E.g. _auth/accounts_/$accountId/projects works well....

xenial-black

1/20/2025

Returning query options in loaderDeps to prevent duplication

When using tanstack query with tanstack router all the examples duplicate the query options between the ensureQueryData and useSuspenseQuery as below. ```typescript const postsQueryOptions = queryOptions({ queryKey: ['posts'],...

variable-lime

1/19/2025

useSearch and conetext are not typed it search types as any and context to {}

My main.tsx ```tsx import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { createRouter, RouterProvider } from "@tanstack/react-router"; ...

conscious-sapphire

1/19/2025

Tanstack router looses types in loader

I am developing a SPA using Tanstack router and convex.dev. The following code works and result is properly typed inside the loader function. In my route component, when I run const data = Route.useLoaderData(); the TypeScript type is any. Am I using the loader function wrong here? I've tried adding an explicit return type, but it still didn't work...

magic-amber

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.

optimistic-gold

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

rising-crimson

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

fair-rose

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

adverse-sapphire

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

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

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

ambitious-aqua

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?

rare-sapphire

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

conscious-sapphire

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

...

solid-orange

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

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