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

continuing-cyan

10/16/2024

Is it possible to have a route with __ in the path?

I need to handle requests to ${baseroute}/__/auth/handler. I'm using the file based routing approach and createFileRoute. I haven't found a way to create a file that doesn't fail due to the leading underscore being trimmed. I included more details in the SO post: https://stackoverflow.com/questions/79093101/when-using-tanstack-routers-file-based-routing-and-createfileroute-how-can-i-g...

plain-purple

10/16/2024

Using virtual routes to load routes from an external package

I do not see why this would not work (I will test later), but, can we do something like ```ts const virtualRouteConfig = rootRoute('root.tsx', [ physical('/node_modules/my-package/routes/', '/namespace'), physical('/', '/'),...

adverse-sapphire

10/15/2024

Understanding beforeLoad

Hello, Yesterday, while playing with firebase auth and tanstack router, I ran into a problem with beforeLoad. On an _authenticated layout I tried to reassign my auth value after it was verified so that the Route.useRouteContext() is typed with { auth: User } and not { auth: User | null }. Then I asked about it and Manuel Schiller help me to find out the problem. But then I wanted to understand how it works better so I cloned the router repository and read how the beforeLoad works here: https://github.com/TanStack/router/blob/d9a97e2693a726342ed8e9bda6af190902f34077/packages/react-router/src/router.ts#L2168. And I saw that before launching beforeLoad the context seems to add prev.__beforeLoadContext so I thought it's the previous beforeLoadContext value of the route match...

ambitious-aqua

10/14/2024

are intercepting routes possible like in nextjs?

saw the nextjs implementation of showing a modal when you click on the link to certain routes but showing the whole page if refreshed and was wondering if there's something like that in router?

like-gold

10/14/2024

Search mask lagging behind by an update

the new search middleware sounds nice! Just wondering if you anyone has been able to look into search params lagging when using declarative masking? https://codesandbox.io/p/devbox/stoic-cerf-qj7jyh ...

other-emerald

10/14/2024

Question regarding nested layouts

within my app i am trying to achieve a nested routing structure (for including navigation/ect for protected routes) for that i am trying to get the Directory Routes approach to apply the wrapper that /secure/index.tsx introduces around all subsequent routes (/secure/profile/index.tsx, ect) i have probably overseen a small piece of documentation but can someone point out my mistake? this is my routing structure...

correct-apricot

10/14/2024

data loader only on first render

I have an overview of posts with pagination and filters and i want to make use of the function that preloads the first render with posts when you hover the link so i implemented this ```ts export const Route = createFileRoute('/_app/posts/')({ validateSearch: zodSearchValidator(PostsRequest),...

harsh-harlequin

10/13/2024

Can I use router on react native?

Thanks

rare-sapphire

10/13/2024

React router to Tanstack router migration

Hi, I'm planning to make migration to tanstack router, so I like to get some ideas how to make the migration for the bootstrap part of the app. The app is client only so far, so I have <AppBootstrap> top wrapper thats executes and makes fetching before any route is hit, and set in zustand store workspaceId for the current workspace. Components structure is like: ...

correct-apricot

10/11/2024

implementing the breadcrumbs example in docs to a typescript project

In the docs there is an example to add breadcrumbs to your layout. https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context ```ts export const Route = createRootRoute({ component: () => {...

manual-pink

10/10/2024

Route implicitely has type 'any' because of loader

I have the following code: ```export const Route = createFileRoute( "/_layout/_adminPermission/admin/committees/$slug", )({ loader: ({ context: { queryClient, auth }, params: { slug } }) =>...

conscious-sapphire

10/9/2024

CreateLink makes all routes "active"

So I want to combine mantine's NavLink with the type safety of Tanstack's Link component. I followed this link https://tanstack.com/router/latest/docs/framework/react/guide/custom-link#createlink-with-third-party-libraries...

conscious-sapphire

10/9/2024

handleSerialError fails when setting err.routerCode with TypeError(s)

Fetch network requests or other fetch errors that don't even bring a response are automatically TypeError, and that object can't be extended, causing: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible

other-emerald

10/9/2024

Get all Search Objects

I have an object where I define properties for a custom MenuItem component that includes a Link wrapper. I have got my route types working where if I try to define a appMenuItem it will provide all of my route paths but I also want to do this for my search objects where I can optionally chose to pass search parameters from one page to another that will be used in the to property in the Link component. For example: ```...

like-gold

10/9/2024

route.tsx pendingComponent is rendering when index.tsx loader runs

I have the following file router structure: ``` └── routes/ ├── (hcp)/...

correct-apricot

10/8/2024

react context provider is not updating router context

I have an auth provider wrapping my route provider. I am then using an auth hook and passing its state to the RouteProvider context. When auth state is changed the context does not seem to update. Is this expected behavior?...

passive-yellow

10/8/2024

I don't know the difference between useDataLoader and useSuspenseQuery.

What are the advantages and disadvantages of each?

correct-apricot

10/7/2024

layouts beforeload

I have a layout with a beforeload. As I navigate to children within this layout the beforeload is executed. Is there a way to configure this to run only once and not every time I navigate to different child routes?

exotic-emerald

10/7/2024

HTTP Session Cookie

Hello, I'm new here around tanstack but have been using query and table for a couple months, I ran into an issue today with an assignment using router where my Auth API uses session cookie stores to store a user's session for Auth purposes, and it was not saving it for some reason? And I then went over to nextjs and it worked without any issues, is there something theory wise that I am doing incorrectly Usage would like similar to below: ```javascript...

dependent-tan

10/7/2024

Router Loaders parallelism in a CRM app project

Hello, I am really wondering what should be the best use-cases for loaders in my case. I am building a CRM using tanstack-router and I have a lot of URLs like this: /entity/$entityId/entityBs or /entity/$entityId/entityBs/$entityBId. My problem is what is $entityId does not exists server-side, all the loaders of the child routes still gets executed for no reason since we know the parent does not exist. Any advices? Should I only be using loaders for my top-level entity page and not for nested 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