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

extended-salmon

11/14/2025

How can I throw redirect from inside a closure that was created inside a loader?

``` export const Route = createFileRoute('/_auth')({ loader: async ({ context: { queryClient, convexQueryClient } }) => { const token = await getTokenApi() if (token.length === 0) throw redirect({ to: '/login' })...

defeated-apricot

11/13/2025

Different pending routing behavior between <Navigate /> and navigate({...})

I have an nested <Outlet /> in my application which controls a stepper flow, the content below is what is rendered by the deeper <Outlet />. Only the <Navigate /> component renders the inner <Outlet /> as null for a moment causing a weird visual appearance. ```...

multiple-amethyst

11/13/2025

_ underscore dynamic paths - are not resolving

Case: /post/$postId => nanoId string that contains _ (underscore) Router can't find matching routes...

quickest-silver

11/13/2025

View transition overflow

Hey guys, I'm trying to setup a simple slideIn slideOut transition, but for a content that is not the full page height. The problem I'm encountering is that the block that manage the overflow is above the div that contain the outlet, and that make the content overlaping the rest of my app during the transition (since the transition element are on the root of the html tree) The video explains it better. Any idea on how could I manage this ? Like "snapshot" the height or something ?...

fair-rose

11/13/2025

Selectors (such as in useLoaderData) cannot return objects that are known to be serializable

Indeed, for example, if I try to return an object that contains a Date (which is serializable, and is supported by useLoaderData without selectors), Typescript complains saying

``
The types of date.toString are incompatible between these types.
Type

() => string is not assignable to type "Function is not serializable"`...

like-gold

11/13/2025

'This is likely a mistake' warning. Is this really a mistake?

I have a folder named '~components' inside /src/routes/dashboard. I have some components inside the ~components folder. Then, when I run the app, I get this message in console: Route file "/User/me/.../myproject/src/routes/dashboard/~components/mycomponent.tsx" does not contain any route piece. This is likely a mistake. No route.tsx was intended because it is a folder for components. This example also has ~components folder which doesn't have a route.tsx in the expensive route.....

ambitious-aqua

11/12/2025

beforeLoad and pendingComponent behaviour

could someone help me understand how exactly does this work, in the docs I saw the below explaination for beforeLoad If this function returns a promise, the route will be put into a pending state and cause rendering to suspend until the promise resolves. If this route's pendingMs threshold is reached, the pendingComponent will be shown until it resolves. If the promise rejects, the route will be put into an error state and the error will be thrown during render. (https://tanstack.com/router/latest/docs/framework/react/api/router/RouteOptionsType#beforeload-method) ...

cloudy-cyan

11/12/2025

getRouteApi() Best Practices

Hey everyone, I am new to learning Router and have a potentially dumb question. In going through this example, I noticed the usage of getRouteApi('route/here') to access the router from outside the route definition. My concern here is if used incorrectly (outside of the route/here route tree), wouldn’t we see this not work/throw an error? I understand that this is more of a code quality/user error concern rather than a bug, similar to trying to access a React Context from outside of its Provider. Are there any guard rails you can set up to prevent this from happening? I saw a few similar posts about getting the errors I am talking about, but wondering if there is a better guardrail than shouldThrow: false...

flat-fuchsia

11/12/2025

Using <Link> to "/projects/$id/$taskId" results in redirect.

I am not able to go to the "/projects/$id/$taskId" route from a link component, but it is working fine with an anchor tag. This is how I implemented it: ```html <Link from="/projects/$id"...

quickest-silver

11/11/2025

Relative paths when from path is condition/unknown

In my app I have a pretty complex routing system in place to handle various cases of navigation. I have the following routes that all basically point to the same outlet, just with varying parameters. For example: - The "root" being /catalog: This means the user is viewing their own catalog, but at the root, not within any folder or item - A folder, being /catalog/folder/$folderId: This means the user is viewing their own catalog, within a specific folder - An item at root /catalog/item/$itemId: This means the user is viewing an item within the root of their own catalog...

vicious-gold

11/11/2025

route api to support more than one outlet

Hello, i've a broad question. i have an app layout which i want to use at the top level of my app (let's assume /routes/app) and have subroutes which i allow with one <Outlet /> component. that being said, my layout's sidebar needs to change depending on the route (which is pretty common) and i'd like to know if, since the router has a component: <RouteComponent /> api, it was possible to have more than one outlet so that my routes could also return their own sidebar structures. thank you...

adverse-sapphire

11/10/2025

Route precendance

I have a legacy route i need to keep which is an API route /$type/$meta/$id, however this seems to take precendence over the route /market/collections/$type . So when a user is clicking around the app, tanstack will server /market/collections/$type, however if a user were to paste /market/collection/$type into their browser the api route seems to take precendance. Is there a way to avoid this without not having 3 named routes?...

deep-jade

11/7/2025

How Best to Handle Query Param Side Effect

During development, I'd love to use a _restore query param to potentially delete the indexedDB backing the app. Curious if anyone has a better / more idiomatic way of doing the following? Ideally without hooks (as I intend to use this within an Effect Atom). ```tsx useEffect(() => { const shouldRestore = dev && new URLSearchParams(location.search).get("_restore") !== null...

extended-salmon

11/7/2025

customErrorAdapter

I have this errors.ts which i want to create my own custom errors, but where do i put my customErrorAdapter? import { createSerializationAdapter } from "@tanstack/react-router" export class NotMemberError extends Error {...

other-emerald

11/7/2025

extending linkOptions

Hi, is there any option to make this function typeSafe? I am talking about extending the "link" with "permisson" I've been strugling with a working solution for a while now and I usually just skip the typeSafety with linkOptions and just make it a const ```...

eastern-cyan

11/7/2025

Should you initialize event stream outside of the router provider or outside of it?

Curious about this what the best approach is Idea is to connect when application mounts and disconnect when application unmounts....

genetic-orange

11/6/2025

No auto complete in vs code

Hi. I have set up my routes according to the doc. But when I use useNavigate and navigate(), it doesn't show the auto complete suggestions of the path names. Am I missing something? Thanks.

sensitive-blue

11/6/2025

Index route without trailing `/` ?

So, I've gone through many pages in the docs and all ai models i have access to and concluded that there is no way to have my website work from a clean url without a trailing / like myapp.com/dashboard where dashboard is my router's basepath the only way this will work is if I add the trailing / like myapp.com/dashboard/ otherwise it will be the not found component is there really no way to make this work without the trailing /?...

fair-rose

11/6/2025

zod validateSearch without redirecting

I'm running into an issue where the outer route does: ```ts export const Route = createFileRoute("/groups")({ beforeLoad: () => ({...

wise-white

11/6/2025

I deleted routeTree.gen.ts and now cannot re-generate it

In TS Router, I've deleted the generated routeTree.gen.ts in hope that re-generating it would resolve some bugs. But the bun dev that is supposed to generate the file now gives me error Pre-transform error: Failed to resolve import "./routeTree.gen" from "src/main.tsx". Does the file exist?. Is there special command that I could use to initially generate the file?

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