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
Array of objects in search params?
Is it possible to represent an array of objects in the query param string such that Router validates it via a zod schema?
<Link href=""> type error
Seems like I no longer can pass just an href without getting a type error. It must be a regression, right?
tanstack router beforeLoad show blank page
I still can't find a solution for this problem setting pendingMinMs and pendingMs to zero doesn't work
Nuqs vs Tanstack Router
Hey folks! 👋
I'm cooking up a table component with filtering and sorting, kinda like tablecn (https://github.com/sadmann7/tablecn), for my app built with TanStack Router. Now I'm stuck wondering—should I just roll with Tanstack Router's own search params and navigate for managing the filter/sort in the URL? Or is it worth bringing in Nuqs to handle that search param state stuff more cleanly?
Has anyone tried both or got tips on what vibes better or makes life easier? Would love to hear any thoughts or real-world experience before I dive in!...
Route props order
just out of curiosity:
why is there a specific order that props should follow in the
createFileRoute object. For example, params and loaderDeps should be passed before loader. I know it should be evaluated in that order probably, but is there a specific reason for passing them in order too, other than encouraging a convention?...Is router.tsx a magic file ? Is it hardcoded on Tanstack router ?
Is
src/router.tsx treated as a special file ?
In the Authenticated Routes example, there is no router.tsx, only a main.tsx
https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes?panel=code
But when I try to use only the main.tsx file, the app breaks with a very obscure message
```...Tanstack Router + React Query + Better Auth
Hi guys, anyone using tanstack router with better-auth?
I have a question, which one you prefer for dasboard app?
1. prefer using useSession on every component that require user data
or
2. prefer using getSession and wrap it with react query in __root beforeLoad then put it on root context so i can access it on every component? then when i need to update user/session i invalidate the query...
How to hide prefix when optional path param is undefined
this is in tanstack start, but posted under router since it seems more router related
Hey im currently following this
https://tanstack.com/router/v1/docs/framework/react/guide/path-params#with-prefix-and-suffix...
Search param from loader data
Hi,
I'd like to use language id data that I receive within loader as a search param
langId so it's available globally to children.
What would be the best approach here?...share status between two routes
is there a best practice way to share a creation status prop between two pages (routes) to show a snackbar with alert message?
Using <Navigate /> causes "Maximum update depth exceeded"
Hey! I came across a weird bug that I'm not sure how to fix.
Basically, I have some logic like auth etc. that redirects logged out users back to the login page. I noticed that if I'm using the
<Navigate /> component to redirect them, it causes a "Maximum update depth exceeded", or more specifically, this error:
```
Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops....Can a layout route be skipped for children routes under a folder?
I’m trying to set up a route tree where most routes inside a section use a layout, but certain deep nested routes inside that same section must opt out of that layout.
🔧 Structure I’m trying to achieve
/app
/portal # Authenticated area — provides the main layout (sidebar, nav)...
Is there a way to validate path parameters pre-route matching?
Is there a way to validate path parameters pre-route matching?
I have multiple URLs with optional parameters like these ones:
/{-$locale}/{$category}/$articleSlug
/{-$locale}/{$branch}/$slug
But in the end the route matching picks the wrong route and thinks a category is a locale. If I could add a regex validation or something to the ${-locale<(en|de|fr)>} that would be great....The requested module '@tanstack/router-core' does not provide an export named 'createSerializationAd
Hey guys, having this error below running 1.136.8 and deploying on Netlify, someone going through it?
...
SyntaxError - The requested module '@tanstack/router-core' does not provide an export named 'createSerializationAdapter'
SyntaxError - The requested module '@tanstack/router-core' does not provide an export named 'createSerializationAdapter'
Matching `/info/` and /info/something/$slug` but not `/info/something`
Is it possible to create something like this with just one route?
Is it possible to forward keycloak client cookie in server context?
Hi, we have SPA react/vite app, that uses keycloak. When we navigate the root of our app, it redirects to preconfigured keycloak login page and users can get cookie through regular username/password or through socials providers (e.g office 365 account).
When login process is finished it redirects back to the root of our app. When users clicks through the app, and different API's are fired, native fetch functions uses include: 'credentials, and cookie is set in request header automatically. There is no single keycloak library used in React.
Now, we like to experiment a bit with Tanstack start, but this client keycloak auth, looks pain in the butt, as I've tried various ideas 'somehow' to forward the cookie, or Tanstack Start somehow to know about that cookie, but no solution works.
Can anyone give some ideas, how to proceed, or is this possible? Or I need some API endpoint, that will do much the same, now the out of the box login page is doing?...
Is it possible to convert a SearchParam string to a valid LinkOption?
I have a URL search parameter called
return_to that contains a URL that may exist within my application like this
?return_to=https//app.foundry-dev.ac/org/settings/billing/credit (URL decoded so it's easier to read here)
I can access that param like this...useQuery keeping the whole page in loading state
Hey guys. This might seem a bit weird but I'm using start with solid and whenever i use a simple query and it resolves and the loading state becomes false, it still keeps the tab in a loading state even thought everything works
```
const modeAlertsQuery = useQuery(() => ({...
Type inference doesn't seem to work with context and loader functions
Hiya, I'm getting the types of context and location inferred as {} in the following spot:
```
import { createFileRoute } from '@tanstack/react-router'
import NewsFeed from '../components/NewsFeed'
import { storiesQueryOptions } from '../queries'...
How can I extend the client-side context down the route tree?
Hi there!
Using
beforeLoad, we are able to extend the router context on the server-side for all child routes. This is really useful, but has the constraint of needing the context to be serialisable, meaning we can't take full advantage of the context manipulation by passing functions, etc.
An example use-case might be logging. The context is created when the router is initialised: ...