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

deep-jade

8/31/2024

Loader is so slow

My query is already cached and adding a console.time before and after the query shows 0.17ms, but the loader causes the page to be white for 1s for loading the page. Removing the loader loads the page instantly. Why?

xenial-black

8/30/2024

Can we get a layout file type for file based routing?

It's sort of annoying sometimes where the _layout files and directories aren't sorted cleanly. And overall I find it a little confusing. Has a *.layout.tsx file type ever been considered? So we can do something like this?...

adverse-sapphire

8/30/2024

Creating Links with has routing and search

Our react + typescript SPA needs to use hash routing. We are also using search parameters for a variety of reasons. When I using the <Link> component it does not create a properly formatted target URL. For example, I have a route /shipping which ends up translated to /#/shipping when we enable hash routing. In certain cases, we want a search param of shipmentId in the URL. When using hash routing, it seems that the search params have to come before the has in order to get properly extracte...

rare-sapphire

8/29/2024

Prevent router from re-mounting identical components from different paths

Is it possible to prevent the router from re-mounting the entire page when there are identical components in both routes? Using ReactRouter, if two pages have a <Box width={x} transition="all 500ms" /> with different x values, the box would just smoothly change it's width. However, using tanstack-router, the box is unmounted and another one is mounted on top of it, breaking any animation....

fascinating-indigo

8/29/2024

Nested but shared routes

I love tanstack router combined with tanstack query - it’s solid AF. But despite all of that I’m still hitting a roadblock. I’ve got 2 pages with layout - _layout - _layout/A - _layout/B...

optimistic-gold

8/29/2024

What would be the "more robust solution" instead of `await sleep(1)` for authenticated routes?

Hey, So I'm building a pretty similar auth to what's presented in authenticated-routes example. What caught me off guard is the await sleep(1) call after you log in (link). This is obviously to give React a chance to re-render so that isAuthenticated context state is up-to-date when AuthLayout's beforeLoad() is called (link). I'm struggling to find anything better though other than a getter that would read localStorage during beforeLoad() execution but I'd still prefer to use the in-memory React state for that purpose....

wise-white

8/29/2024

Path params with whitespaces

I'm currently working on a ui for a backend that isn't mine for some reason, to get the detail of some resource i have to use a varaible called name which may have some whitespaces on it currently i have a table page and a detail page resource/index.tsx resource/$nameId.tsx...

rare-sapphire

8/29/2024

Route 404 when visiting protected routes (when deployed only)

if I visit / I get no problem, but when I try to visit /dashboard that use a beforeLoad, I get 404, thi happens to me on vercel. (I'm using vite+react) ```...

xenogeneic-maroon

8/28/2024

Update from 1.48.4 to 1.51.2 broke typesafe route prop

Hey everyone! I have a context provider that takes some props for config, one of which I want to enforce to be a valid, existing route in my routeTree. Here's how I accomplished that before this upgrade: ```ts...

mute-gold

8/27/2024

routeTree.gen.ts setting the wrong parent

hey guys. I have a file route defined as ``` in: src/routes/~tree/~$treeId/~test/~$testId/~index.tsx ...

harsh-harlequin

8/27/2024

[RACE CONDITION] Auth0 Redirect and Context

Is there a way I can put my Auth0 State into my Router Context and be able to use useNavigate() in order to redirect back to routes a user is trying to access? I'm trying to use useAuth0 and useNavigate but RouterProvider is waiting for its context from useAuth0 and useNavigate that is being used inside of the Auth0ProviderWithRedirect needs to be within RouterProvider Here is their example with react-router https://github.com/auth0/auth0-react/blob/main/EXAMPLES.md#protecting-a-route-in-a-react-router-dom-v6-app...

genetic-orange

8/27/2024

[SOLVED] Is there any way to use the route named as literally "route"?

Hello. I'm using TanStack Router v1. Is there any way to use the route named as literally "route", with codegen enabled? I tried %72oute.lazy.tsx , but it seems not working. Thanks. Here's quick implementation which explains what I tried: https://github.com/LumaKernel/hello-tanstack-react-router-1/tree/main/src/routes...

eastern-cyan

8/26/2024

Do beforeLoad logic on all children routes of parent.

Take tree for example ``` /users/$userId /users/$userId/foo...

fair-rose

8/24/2024

zod .catch() in validateSearch create infinity loop

Hey I have this route: ```js export const paginationSearchSchema = z.object({...

mute-gold

8/23/2024

Problems with beforeLoad() and load()

Hello guys, im making my app with react, vite and tanstackrouter, and ive been doing great since i faced this problem from couple weeks whiout a progress and wondering if someone can give me a hand. The problem its releated with how the app its handling the auth of the user, im trying to protect the routes with beforeLoad() but its been ignoring by load() and its rendering first the data. Im trying all the ways to fix it but nothing fix it. If somebody can give me an advice that will be helpful...

sensitive-blue

8/23/2024

Navigating between Micro-Frontends with TanStack Router's <Link> component

Hi everyone, I'm working on a monorepo with multiple micro-frontends using single-spa and module federation. I'm using TanStack Router for routing within each micro-frontend. I'm trying to figure out the best way to extend the <Link> component so it can navigate between these micro-frontends. I have a basic implementation that removes the basepath when ignoreBasePath is set to true, but I'm not sure if this is the most efficient or recommended approach....

eastern-cyan

8/22/2024

Typing params for top level routes that might have them?

Is it possible to type params that might exist at a higher level? Aim here is to swap cookie values if a specific param value changes ```js const appRoute = createRoute({ getParentRoute: () => rootRoute,...

vicious-gold

8/22/2024

Type error <Link to={"./"} />

Hello, idk how to solve this type error, the link is working fine as it should be, but this red line is so annoying

quickest-silver

8/22/2024

Offline first approach with PWA

Hi Guys I want to run a PWA offline first webapp with tanstack router. Did anyone has experience with it? An old project is using React Router and the Vite PWA plugin. I wonder if that would work with tanstack file based routing + lazy routes work out of the box? Any hints are more than welcome, thanks!...

conventional-tan

8/22/2024

parseParams and stringifyParams deprecated

What interfaces I can use to fix this deprecated properties?

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