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

exotic-emerald

11/2/2024

useSearch on a dynamic hook

Hi everyone I'm trying to build a dynamic hook to handle the things for the tanstack table, like: - pagination - filters - etc...

plain-purple

11/2/2024

Nested route different layout

Hi, i'm starting to use ts router and I would like to know if this is the only way to have the user edit page with different layout that i have on my app route. I mean, i really have to create the "app_"~ route paths? there's no way to have the edit page inside my current "app" folder structure but without inheriting the parent layout that is in "app" folder?...

fascinating-indigo

11/1/2024

Router context indeterministically using the initialValue instead of the passed value

Hello, I have a problem where in beforeLoad the router context sometimes use the value I passed to it and sometimes it uses the defaultValue (undefined in my case). Isn't the context supposed to always use the value provided to it?

other-emerald

11/1/2024

How to hide back button?

What if the proper way to hide a back button? I have a back button which calls router.back() but I want to hide this button if router.back() would go out of the app. (For example, if you open a new tab and then go to the URL of the app, router.back() will work until it will go back to the new tab)....

ratty-blush

10/31/2024

Possibility of showing a spinner / loader prior to beforeLoad delay of 500ms

Im piggy bagging off the auth example from the docs. But using Clerk together with Convex for my authentication. I show a <LoadingView/> to the user while convex and clerk is done loading auth. this takes approx 700ms after that the beforeLoad happens and doens't return before 500ms which results in a white screen in that time span. My question is... is such a delay for this beforeLoad normal? and if so, could i show my loading spinner again while beforeLoad returns?...

optimistic-gold

10/31/2024

How to add debounce to loader

I want to add debounce so that when search params change loader waits before fetch. Is it possible with TanStack router?

sunny-green

10/31/2024

Search Params -Date parsing

We’re currently working through some filters that put a date range as two separate search Params. In our Zod validator we’re converting the date strings to Date objects exposed over useSearch. Is that a great practice or should we be doing that conversion in the select method of useSearch as a better practice. I’m mostly asking due to a big we introduced where leveraging previous params caused the Date object to be passed in when it needed to be conveyed to an ISO8601 date format....

wise-white

10/30/2024

Router set up for a complex app

I am building a project management app that has an "internal" view and an "external" view. The internal view is served at app.my-company.com and the external view is served at subdomain.my-company.com where subdomain is our customer's slug. I want to serve different routes in the internal view and the external view. Currently I have the same repo deployed on all subdomains and in my CRA + react router setup, I serve either the internal routes (if it is a reserved subdomain) of the external routes (if there is a non-reserved subdomain). ...

quickest-silver

10/30/2024

useSearch with validateSearch in _layout

I have the following routing structure ``` - post |- $postId |- _layout.tsx...

like-gold

10/30/2024

Can I prevent path parameters (specifically @) from being escaped?

It looks like path parameters are being escaped using encodeURIComponent instead of encodeURI which replaces characters like “@“ with “%40”. Is there a way to disable this behavior (have it use encodeURI internally instead)? If not, would a PR be welcome to update this behavior? (Use encodeURI for path segments but continue to use encodeURIComponent for query string and hash parameters) Edit: Upon looking further it seems encodeURI would probably be a bad idea as it would not escape “?” or “#”. Seems like a likely foot gun. I’m open to other ideas though. ...

adverse-sapphire

10/29/2024

Router layouts inside subdirectory and prefixing

Gut check since I'm mostly brand new to Router and start, when creating a layout for a sub-route, it shows here that you could define it like this to create a Posts layout, is there any way to keep that layout file inside the subdirectory without having to prefix all the other pages inside it such as index and $postId?

quickest-silver

10/29/2024

i18n Route Match

Im debating what would be the best approach for implementing router rules/files to implement the following: - /pt-PT/about - /en-US/about - /fooo-bar...

unwilling-turquoise

10/29/2024

Access routes other than route leads to cannot get route

Hi, I have my file-based routes like this the screenshot If I try navigating from root to /raffle-details/$id, or reload that page, it'd work normally in dev server (vite). The issue happens with the build. I ran live-server and it was able to open the root route, then the details route. But if I access the details route directly, or reload that page, I'll get Cannot get page (screenshot). I try adding a notFoundComponent, it was not able to load this component as well....

eager-peach

10/28/2024

Adding additional info to a route configuration

General question, is it possible to attach additional data to a route config, and have it typed for all routes? Thinking of something like being able to define an icon component for a route, so that I can pull that when displaying links in a sidebar or page title. The alternative is having to define things like a route's icon somewhere else in my application, which means that my route configuration is in different parts of my code instead of being centralized. If it helps, I'm using file based routing....

ambitious-aqua

10/27/2024

apply upper level layouts to nested routes

Hi, How can tanstack-router executes layouts from upper level strucure, when I navigate some nested route. For example: _root.tsx (have _layout.tsx) settings (index.tsx, settings folder also have _layout)...

secure-lavender

10/27/2024

file-based routing and nested paths (seems to be broken)

While rewriting my code-based routing app to a file-based one, I faced a strange thing — I can’t figure out how to create nested paths. During my searches for similar issues in history, I came across a few now-closed issues on gh like https://github.com/TanStack/router/issues/832 , but they were of no help for me 😭 I’ve reproduced bug (?) in a devbox here: https://codesandbox.io/p/devbox/6k9wl6 And here is a working example with code-based routing: https://codesandbox.io/p/devbox/xnktj8 ...

unwilling-turquoise

10/27/2024

Isolating Table Loading State Without Triggering Higher-Level Loaders

Hey I have my app with list of users inside table with basic pagination (page number, page size). Everything is working fine, but I wanted to make loading spinner inside my table whenever the request will be taken longer for example due to bad connection. I am using tanstack query + tanstack router. I tried doing this with useTransition hook from react and tried to render loader inside table whenever isPending from returned from hook is true but that loader from table was "over written" by the higher loaders for example inside createFileRoute or defaultPendingComponent. ...

harsh-harlequin

10/26/2024

autoCodeSplitting causes entire app rerender

When autoCodeSplitting is set to true in vite config, every time I change anything in a route.tsx file, entire app re-renders. If i extract the part I want to change in a separate file (so not only component but new file) then only the component itself re-renders. Disabling the plugin makes everything work normally, ie. changing something in a route.tsx file doesn't rerender the entire app, just the part that got changed. This is what vite outputs as being updated with autoCodeSplitting on:...

national-gold

10/26/2024

Cant enable autoCodeSplitting

Hello! I just found the autoCodeSplitting function, i tried enabling it and im getting [router-code-splitter-plugin] Unexpected splitNode type ☝️: VariableDeclarator I tried updating to: ``` "@tanstack/react-router": "^1.76.3", "@tanstack/router-generator": "1.74.2",...

optimistic-gold

10/25/2024

How to skip reloading data

Just curious if there's a way to dial in on loaders and skip running fetch functions on every single loader call. Here's a contrived case where using search params I am conditionally rendering a modal, but the root loader also fetches pokemon. It would be fantastic if there was a way for me to do something such that I can skip querying for all pokemon when only the modal search params change....

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