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

foreign-sapphire

11/13/2024

Optimize complex searchParams update handling Task

Initial Investigation I started investigating the setTimeout with pendingMs = 0 usage, thinking it could be removed. - The complexity comes from the searchParams update handling logic itself, not from the timeout ...

genetic-orange

11/13/2024

How to correctly account for space character in search params

Hello, When I use this code to navigate to a page with given search params, it puts "foo+bar" in to the url. Then, when I click back it navigates to "foo%20bar" with the correct encoding for the space character. Am I using navigate incorrectly? How can I make it correctly encode the space? Thanks ...

fair-rose

11/13/2024

Route types not being passed across libraries in a monorepo

I was about to post a question about this but ended up solving it. Posting it anyways in case someone else (or me in the future) run into this issue: I'm exporting the Link component from a router library in a monorepo and importing it in a component lib and now the "to" prop is typed as any. Is there some sort of typescript config or something I need to modify for this to work? The attached photo shows the Link being exported and and example of it working on the left where on the right you can see that the link component isn't type checking. ...

rising-crimson

11/13/2024

Render optimizations with loader/deps

Hey, I'm trying to understand the render optimizations with the fine-grained selectors. I noticed that as soon as you add loader deps this breaks. Changing loader deps will re-run the loader with a cause value of enter and everything will re-render. ...

correct-apricot

11/13/2024

How to retain only search params of Route

I have two routes where I am using search params for filtering and sorting. The search params between the two routes are completely independent of each other so I would like to only show the search params of the active route in URL while ALSO stripping default params. I'm using the middlewards like so: ```ts search: {...

flat-fuchsia

11/13/2024

Create a one-time view page

I'm building an order spa using tanstack router. I have one route (index) and it has lot of forms, sheets, etc after the user fills out the forms and do the payment, I want to push it to another route /confirmation and show the order details. Is there a way to achieve these: - Dont add the confirmation route to the history - Disable the route if the payment is pending (dont allow the user go to the confirmation page) - Avoid using localstorage/sessionstorage/cookies for security policies...

adverse-sapphire

11/12/2024

Conditional rendering under single route

Hey, Assume I want to have 2+ conditional "screens" rendered per route, is there a more concise way of doing it? My naive solution is something like ...

flat-fuchsia

11/12/2024

SidebarProvider error

Hi guys, according to shadcn I need to setup the SidebarProvider, which I do it in the wrap property from tanstack router but it doesn't work. Ref: https://ui.shadcn.com/docs/components/sidebar Is that the right place?...

rising-crimson

11/12/2024

Kitchen Sink Example

`preSearchFilters: [ // Persist (or set as default) the usersView search param // while navigating within or to this route (or it's children!) (search) => ({ ...search,...

relaxed-coral

11/11/2024

I can't get the scroll restoration to work on my app. Someone can help me please?

Hello, I am building an App with Tauri, in the frontend I have React with Vite. I added the TanStack router and for now it works pretty good. But I can't make the scroll restoration works and I don't know what else to do. I was looking the SessionStore and I have something like this: ``` {"cached":{"/todayhtml:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":56},"/html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":560},"/feeds/7html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":1904},"/articles/282html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":0,"scrollY":4400}},"next":{"html:nth-child(1) > body:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(3)":{"scrollX":null,"scrollY":null}}}...

rising-crimson

11/11/2024

Path Param vs Search Param

What is the Tanstack philosophy on when to use path params vs search params? I've seen in some of the examples things like posts.$postId.tsx for a route, but in the file-based kitchen sink dashboard example the code uses searchParams for the userId. Does it basically come down to personal preference or is there a more concrete reasoning for using one or the other? Thanks

deep-jade

11/11/2024

Declarative expected behavior or issue

Hello, I have the following case: - posts route has search params - use route masking for post details route to hide the search params - search params are persisted when navigating back from post details to posts ...

other-emerald

11/11/2024

Converting a custom Link component to use createLink after moving to a monorepo structure

Hello 🙂 I am hoping for some advice as I am in over my head and have become stuck on this: I am converting to a monorepo structure, and I have started encountering TS issues related to it, where I had no issue before....

deep-jade

11/10/2024

Link isActive on parent component

I need to pass isActive to the parent component of a Link. It is described here how to do it for a child component: https://tanstack.com/router/latest/docs/framework/react/guide/navigation#passing-isactive-to-children But I can't seem to figure out how I could check if the link is active at the parent component. Any help greatly appreciated!...

wise-white

11/10/2024

how can I match a route with same component and not rerender?

I want to render my /login and /register pages with the same component. the router should render the same component but only change disabled properties on input fields and toggle this className on an overlay div. simple recreation: ```tsx...

extended-salmon

11/9/2024

Netlify forms does not work with tanstack start

I have a netlify form: https://surfeb.netlify.app/ When I submit it, i get a 404. I think this is a tanstack problem but I am not able to debug it. Does anyone have an idea?...

inland-turquoise

11/9/2024

Replace history for entire sub path

There's a portion of our application that we don't want to put into browser history. /dashboard/editor/** Is there anyway to disable it at the route level so that we don't have to call replace:true on every navigate/Link?...

genetic-orange

11/8/2024

How do I turn off console logs for server functions?

Is there a setting somewhere in app.config.ts? I couldn't find anything in the documentation

extended-salmon

11/7/2024

Prerendering in react

I found this link but i am not sure where to put this app.config.js file. Moreever this file is not documented anywhere else in the docs

foreign-sapphire

11/7/2024

Processing accumulated route context to generate breadcrumbs

Tried following this example: https://tanstack.com/router/latest/docs/framework/react/guide/router-context#processing-accumulated-route-context But I am getting a: Property 'getTitle' does not exist on type 'AnyContext'. when I try to use the breadcrumbs example. Why's that?...

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