TanStack

T

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

constant-blue
constant-blue3/14/2025

How could the beforeunload event best be handled when a blockenFn is supplied?

I stumbled upon https://github.com/TanStack/router/issues/3761 and I commented what I found out about this issue and it seems to not be a straight forward as it initially seems. Is Discord maybe the better place to discuss how this should be handled?
yelping-magenta
yelping-magenta3/14/2025

<Form/> API or Actions implementation

Now that we have a Solid-Router and a Solid Start and forms at 1.0, are we going to get an official Form api or actions in V2.
complex-teal
complex-teal3/13/2025

Store links in an array

I'm trying to define a long list of links in an array for an onboarding flow so that I'm able to programmatically define a layout where you have the navigation to the left (list of links in order) and so that the layout automatically provides "previous" and "next" buttons for each step of the flow. Is there a way to type: ```ts...
frail-apricot
frail-apricot3/13/2025

<Await> hiding the entire page until data is resolved

```tsx import { Await, createFileRoute } from "@tanstack/solid-router"; const loader = async () => { await new Promise((r) => setTimeout(r, 2000));...
correct-apricot
correct-apricot3/12/2025

useParams returns any

Hi everyone, ``` export const Route = createFileRoute("/myRoute/$id")({ component: MyComponent, });...
adverse-sapphire
adverse-sapphire3/12/2025

How to get type of params of a route?

I want to use the type of route params as component props. How to get them?
provincial-silver
provincial-silver3/11/2025

4 rerender with basic fetch

Hi all, I'm getting started with tanstack router, and I'm working on fetching some data. This isn't a huge deal, but I'm wondering why my component is fetching 4 different times when I navigate to the route. When I navigate to the Posts route, I get that console.log for the posts print out 4 different times. I'm wondering why....
optimistic-gold
optimistic-gold3/10/2025

Problem getting View Transitions to work with SolidJS

hi, thank you for the great library. like in the title. The exact same setup works fine with React, but Solid does not animate elements sharing the same view-transition-name I set defaultViewTransition: true on the Router...
eastern-cyan
eastern-cyan3/10/2025

Best way to avoid route duplication for optional parent segment (file-based routing)

I'm using file-based routing and need to support an optional parent segment in my URLs. Current routes: ``` /event123/overview/...
complex-teal
complex-teal3/10/2025

Is there documentation for view transitions in Tanstack Router?

I see there are some pages related to view transitions (e.g. https://tanstack.com/router/latest/docs/framework/react/api/router/ViewTransitionOptionsType#viewtransitionoptions-type) but there doesn't seem to be a main article about it. Are view transitions ready to be used? If so, how? Thanks...
deep-jade
deep-jade3/9/2025

Get root context anywhere in the code

so in my __root.tsx file, i write to the root context :' ` beforeLoad: async () => { const session = await getServerSession(); return { session }; },``...
complex-teal
complex-teal3/9/2025

Is there a typesafe way to build a path to string?

Question I'm using Tanstack Router and Tanstack Start and I'm wondering if there's a way to do something like: ```ts...
conscious-sapphire
conscious-sapphire3/9/2025

Route validators (params/search) when using TanStack Start

Hey guys, recently started using TanStack Start, amazing so far but encountered this quirk, I'm having a bit of trouble with route validators for params and search. When navigating within the app everything works as expected (same as using router on client apps only) but when paired with start i encountered an issue when entering the page from outside or just refreshing then the validators wont work, here is a short code to demonstrate. ```tsx // posts.$id.tsx export const Route = createFileRoute('/posts/$id')({...
fascinating-indigo
fascinating-indigo3/7/2025

How to change page title per route?

Back in the day we used to use React-Helmet. That seems to be unmaintained now for a while. I found this page but it doesn't explain how I can dynamically change the page title based on values on the page: https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management Anyone done this before?...
extended-salmon
extended-salmon3/7/2025

How to strip search parameters in beforeLoad or loader route methods?

Hi, I'm trying to consume some URLSearchParameters so that after a beforeLoad or loader async function finishes, the URL no longer has the search parameters used. Any strategies I should look into?
correct-apricot
correct-apricot3/7/2025

Page title based on loaderData

Hello, is there any way i can put some data into a title? In a Route Component u would use ```...
No description
variable-lime
variable-lime3/6/2025

Passing context from beforeLoad to loader

Hello all, I am having trouble with passing extra context parameters down from beforeLoad to my loader function. See the code snippet below: ```...
hollow-tomato
hollow-tomato3/6/2025

How to retain type information in styled components?

I'm going through the motions of upgrading router to latest version and I ended up running into type errors with @emotion/styled. If I have a route with a token, a styled link will result in incompatible params. I can work around it with LinkProps: ``typescript const StyledLink = styled((props: LinkProps<'/path/to/$token'>) => <Link {...props} />)...`...
sunny-green
sunny-green3/6/2025

High loading times on navigation

Hi, I created a fresh new project with tsr. But I noticed that when I enter a router on browser the loading time is very high. Using navigation API seems ok, but when I enter for first time to the app or move manually to another router the loading time increase. Here are a video demostration:
adverse-sapphire
adverse-sapphire3/6/2025

Change tab and route from within different component

I need to trigger a shadcn tab change in my route.tsx from within another component that is on the tab content. Is there a way to do this?