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

vicious-gold

9/3/2024

Is it possible to filter the route param with Tanstack Router?

I have several types of interfaces: - for /@{user} I need to show user profile page - for other (/, /game, /trends, /movie, ...) paths as /{section} I need to show section info page ...

optimistic-gold

9/3/2024

How is this auth implementation (WorkOS/Syncing to DB)

I have a question for my auth use case if anyone is willing to offer a 2nd opinion In my app an Organization has both 1+ users and Org/Users are assigned to 1+ workspaces. Using WorkOS here and trying to make sure my backend is synced with WorkOS Not sure if there's a better way of doing this....

manual-pink

9/3/2024

pass a “state” when using “navigate()”

Hey, Thanks for all the help with the previous question. Now to the next one: After sign up I’m redirecting user to “sign in” page using “navigate({to: “/sign-in”})”. I want to display some kind of toaster for users that just signed up and are on sign in page to inform them to check the email. ...

evident-indigo

9/3/2024

How to get the available routes as a type

Is there a way to get the available paths as in /, /about, /profile etc. as a type?

evident-indigo

9/3/2024

Link component expects `search` prop when validateSearch is used in a route

```ts export const Route = createFileRoute('/dashboard')({ component: Dashboard, validateSearch: (search: Record<string, unknown>): PaginationState => ({ pageIndex: Number(search.pageIndex) || 0,...

fair-rose

9/3/2024

Question about route conflicts

Hello. With file-based routing, how can I achieve: /items - $itemId.tsx...

extended-salmon

9/3/2024

tanstack router, tanstack query with zustand?

is tanstack router and tanstack query recommended to be used with zustand?**

rare-sapphire

9/2/2024

Routes not loading if navigated directly to it

Hi! I'm trying to figure out why after building I can't open links directly to nested routes, as it cant find any of the assets (JS and CSS bundles) I believe this is a vite thing but i followed the docs and doesn't mention anything about the base route, any ideas on how to fix this? For example: https://supersecretDomain.com/cabina works as it should, but https://supersecretDomain.com/cabina/1 where routes is defined as /_layout/cabina/$serviceOrderId doesn't load...

wise-white

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?

optimistic-gold

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

dependent-tan

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

optimistic-gold

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

manual-pink

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

rising-crimson

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

xenial-black

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

harsh-harlequin

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

mute-gold

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

absent-sapphire

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

fair-rose

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

harsh-harlequin

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

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