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

2/13/2025

Invalidate route without reseting scroll

In my page I have a button which programmatically invalidate the current route: ``` const handleDelete = async () => { const response = await mutation.mutate(data.id);...

typical-coral

2/12/2025

Access react context set in a inner component in loaders

I have some global context that works fine with routewithcontext. I have a container component that provides a context to all child routes. How do i access the context in route loaders?

xenophobic-harlequin

2/12/2025

Managing some global state from route callbacks?

Is it a bad idea to manage some global state within a routes callbacks? Reason I’m second guessed by this (even though it does what I want) is that loaders can be re-run anytime… so it could cause potential state inconsistencies?

sunny-green

2/12/2025

How to programmatically navigate to a new tab with useNavigate?

Hi! I'm trying to figure out the best way to programmatically navigate to a route in a new tab using TanStack Router. Currently I'm using useNavigate like this: ```typescript const navigate = useNavigate({ from: ApplicationsRoute.fullPath })...

subsequent-cyan

2/12/2025

Equivalent to React Router `handle`?

Hi everyone, I'm currently transitioning a project from RR to Tanstack Router and I haven't exactly found an equivalent for the route handle concept (https://reactrouter.com/start/framework/route-module#handle). Baiscally, I need a way to return some component or value from a route and be able to retrieve it further up the tree using useMatches....

vicious-gold

2/12/2025

Get fullPath and params from interpolated pathname

Hey everyone, is there a utility exported from tanstack that would be able to tell me based on a list of routes and a pathname, which route said pathname matches? Something like ```ts function findMatch(routes: string[], pathname: string): string const routes = [...

plain-purple

2/11/2025

resetScroll={false} only works on first click

I am super confused here. The first click on one of these tabs works correctly (page doesnt scroll to the top), but all subsequent clicks scroll to the top. Am I doing something wrong? The same was happening when I tested with Link components outside of this Tabs component as well, so I think I've isolated it to not be an issue with this component...

genetic-orange

2/10/2025

Prevent scroll restoration for some links?

Is it possible to prevent scroll restoration for a specific link (not url) i thought resetScroll was able to achieve this, but it does not work as i expected, it always scrolls to the top

deep-jade

2/10/2025

Before load not working in child routes

In the before load in the _authed.tsx I have it checking to see if the user is authenticated. _authed.tsx ```ts import { createFileRoute, Link } from "@tanstack/react-router";...

exotic-emerald

2/10/2025

Is it possible to navigate to a file component that is OUTSIDE the route tree?

I'm trying to understand If I need to put literally every components that need navigation to inside the route tree or I can also put them outside it. Thank you!

conscious-sapphire

2/10/2025

Why specify route path in code for file-based routes?

Hi, I'm learning about TSR via the website docs. I noticed that, for file based routing, the route paths still need to be specified in code like this ``` export const Route = createFileRoute('/posts')({ loader: fetchPosts, component: PostsComponent,...

narrow-beige

2/10/2025

Tanstack Start with Clerk and Convex

My current setup you can see on screen. All works fine except when I try to open webpage from bookmark like /dashboard/transactions/incomes on first render (I was logged) I'm getting error shown on image. Most important code parts:...

fair-rose

2/10/2025

Redirect to throws type error on dynamic route

I have a dynamic route setup and the types keep throwing me errors even tho the route is clearly there. ``` export const Route = createFileRoute("/doc/$exportId")({ loader: async ({ params: { exportId } }) => {...

eager-peach

2/9/2025

Keeping large object in search params causing too long URL.

How you deal with large objects stored in search params? In my example, conditions of TableView can easily grow, that's why when user refresh page gets error Uri to long, how avoid that keeping all functionalities of shared link etc. of Tanstack Router. ``` /* =========================================...

compatible-crimson

2/9/2025

Extracting Link props while retaining type safety

Hi, everyone. Need some help regarding utilizing router's typesafety in custom components. So as per docs, I was successfully able to create a custom link with same type safety as standard Link of tanstack. So far my code something like this:- ...

extended-salmon

2/8/2025

Authentication with tanstack-router

I am implementing access and refresh-token based authentication on a project and on the signup and login route, I make a check in the before-load function, if user exists, if it does then he is redirected to the last page he was on from the signup or login page (implementing typical auth behaviour). But doing so is giving an error and the page doesn't load, if I comment out the code for before-load then everything works. ```Error Message: Request failed with status code 401 Stack Trace: AxiosError: Request failed with status code 401...

diverse-rose

2/8/2025

Advice on path-based i18n without lazy-loading or importing every language on the client.

I'm looking to build a pretty straight-forward path-based i18n setup like: ``` /en/projects /en/projects/1...

afraid-scarlet

2/8/2025

Client side routing 404 error on refresh.

I just deployed a react app using tanstack router to fly.io. When I access the delployed app it gives me a nginx 404 error after refreshing or after moving to another page. Is there a way to bypass this ?...

deep-jade

2/6/2025

Validating Request Body, Typing API Routes, and Middleware Authentication in TanStack Start API

Hi, I’m using TanStack Start API routes and have a few questions:
1. Validating Request Body
I’m currently validating the request body in a POST route using Zod with safeParse, but request.body has to be validated like so: ...

typical-coral

2/6/2025

All child routes in a single bundle?

Is it possible to include all child routes code in a single bundle. The generated bundle files for child routes are very small in size.

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