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
beforeload with async does not seem to wait or creates infinite rerenders
I create a minimal reproduce ... its the context.hasAccessTo that tries to wait for result but dont get anywhere...
https://stackblitz.com/edit/vitejs-vite-uw5gth?file=src%2FApp.tsx
I have an app with 156 routes - upgrading from "1.31.6" --> "1.36.3" this ends up with infinte rerender issue ... is it known issue? are there any workarounds?...
Transforming backend filters in the loader to frontend params.
In my application we have just started using the TanStack router for the dashboard page. Each dashboard has a set of filters stored in the backend. When i load this route i would like to set these params in the loader of the createRoute so that they are exposed to the page component. How can i do this? (the filters are in the response of the dashboard query)
```tsx
const baseRoute = createRoute({
getParentRoute: () => rootRoute,...
Any plugins for rspack or webpack support?
Hi - we are currently checking out this cool looking router ❤️
We are currently considering it for the PlatformPlatform project but we are on rspack - any official plugins or is the cli devtool the way to go?
Thank you 🙂
...
redirect in beforeLoad/loader causes infinite loop
I have a layout
_authed,
```
export const Route = createFileRoute("/_authed")({
component: LayoutComponent,
beforeLoad: async ({ context: { queryClient } }) => {...[FIXED] Prevent Router's loader to rerun when the hash changes
How can i prevent a loader to rerun whenever i change the url's hash?
```typescript
{settingsMenu.map((menu) => (
<Button...
Easiest way to make the possible routes/paths accessible when browsing it directly
First things first Im a newbie on building websites in general and I know that this can be a Vite question (but Im not so sure). Also I know this is a very Googleable question but I have no idea on what to search, so feel free to provide me some terminology on this.
Basically I want to make my route domain.com/user accessible without necessarily navigating to the domain.com before to manually go to the /user route. Of course, on development build works fine but not in prod, probably because of some config that Im missing. Am i able to trivially achieve this using tanstack router / vite ?...
Automatically generate file routes on save
Hi newbie here, im really enjoying tanstack router but if i create a new file route, i always rebuild my program with npm run dev so that the routeTree updates properly. is there a way to generate routes automatically on save?
Navigate to an external url prob
Hello, I'm encountering this problem while trying to redirect the user to an external URL in the loader function.
This is my logic:
Fetching products.
If the returned list is empty, I will redirect the user to the external URL.
I've tried using "throw redirect/navigate," but it hasn't worked....
loaderDeps / loader function race condition.
I have noticed, this issue in Tanstack router whereby the loader function within the router gets called first, before loaderDeps is executed.
As a result, few of the values in loaderDeps are undefined. However upon dropping console logs I can see loaderDeps gets search params later on, but at this point loader is never re-executed. How do we get loader to re-execute when loaderDeps changes ?
```ts
export const Route = createFileRoute('/some/desination/route')({...
Sync router with other router (ex vue router) for a micro-frontend setup
I was wondering if anybody already did a similar thing or has suggestions how we could sync our tanstack-router with another router for example the vue router.
We have a micro-frontend setup using module federation where our old code is still written in Vue.js and we are gradually converting pieces off the application to React.js.
ex: We have a container app in React.js that handles authentication etc and then we've split up our application into separated pieces (child apps):
- sub app: file browser (vue.js)
- sub app: addressbook (vue.js)...
Dynamic breadcrumbs
I have a project route (
/projects/123) which can be navigated to from 2 different routes (/projects and /customers/456). Depending on the route I have come from, the breadcrumbs in the project route should show the correct previous route.
Is there a standard for how to implement this? If I store it in a context, then what happens when someone refreshes the page? If I use localstaorage instead, there could be multiple tabs to track which can make it a bit more complicated.
I just want to make sure I am doing everything right from the start with tanstack router. I need this for the project route today but what if I need it for some other route in the future? How should I be configuring things?...Does it make sense to start with Tanstack Router for electron.js app
I am familiar with next.js, vue3 and react.
I have an App written with next.js that I want to port to the desktop with electron.js.
Does it make sense to use Tanstack Router instead of next.js. If I stay with react I should be able to use all the present components as I did not use many next.js native hooks or anything like that.
I am asking because I heard that next.js and electron.js are not working together really well.
...
Weird errors (only in production) with following structure
I have the following routes:
- /player/$playerId/info
- /player/$playerId/events
- /player/$playerId/economy...
Use explicit params on loader function
I have a pathless route of
"/_layoutMain" which is basically my layout.
Now I also have a "/channels/$guildId" route.
But In the loader of "/_layoutMain" I need to get the "$guildId" of "/channels"
But the loader param object is now type of Record<never, string> So I can't convince it that there is indeed a param here....Why can modules.data be undefined here?
```typescript
export const Route = createFileRoute('/_auth/gameserver/$gameServerId/modules')({
loader: async ({ params, context }) => {
const [modules, moduleInstallations] = await Promise.all([
context.queryClient.ensureQueryData(modulesQueryOptions()),...
Disable loaderData cache
Is it possible to disable the cache for the loaderData completely for a route?
Redirect behaviour on child pages
Hello! I am having some trouble with redirects in Tanstacak Router.
I basicly have some pages set up something like this:
...
/dashboard
/dashboard
/dashboard/user
/dashboard/user
/dashboard/admin
/dashboard/admin
is using route.fullPath still possible for index routes with trailingSlash never?
This stopped working (in ts-land) with the type handling of trailingSlash, wondering if there is a workaround I'm not aware of, other than typing out the full path.
See line 67 here: https://stackblitz.com/edit/tanstack-router-xrnp9s?file=src%2Fmain.tsx%3AL68...
Getting access to the isLoading state when using queryClient.ensureQueryData() within TSR
I am using Tanstack router, along side Tanstack Query to fetch data for my route. When I navigate from one route to another, I wanted to display a loading spinner on the current page, while data is being fetched for the destination route. The below code snippet is what I'm working with.
```ts
export const Route = createFileRoute('/some/desination/route')({
component: DesinationComponent,
// I do pass the Tanstack queryClient via context....