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
Using route groups?
Is using route groups like this () discouraged? Does it do anything? Like (app) or (auth) where i use route.tsx for the layout of each.
Also is route.tsx keyword file?...
Is there a way to update a search param without triggering navigation hooks like beforeLoad?
I tried to use
window.history.replaceState({}, "", newUrl); but even that causes the beforeLoad of routes to run.Precautions I should have when using Router + Query?
Hi everyone,
I have a project that uses TanStack Query and React Router, with all my network calls going through Query.
I'm currently migrating to TanStack Router and following the documentation. During this process, I came across createRootRouteWithContext as opposed to createRootRoute, but I'm not sure about the differences or when I should use one versus the other....
Any example of using shadcn ui tabs with tanstack router
Any guidelines how to display the active tab on the url.With Assumptions tabs are not separate routes.So the url will be in this format /home?tab=Overview or /home?tab=Settings
Layout component in route vs using a layout route performance
Does having a layout route make it more performant to move from one page to the other compared to just having the two routes and inside each the content is wrapped by a Layout component?
I'd guess there isn't much of a difference since Tanstack Start does client side routing but maybe I'm missing something....
[vite] (ssr) Error when evaluating SSR module $vinxi/handler/ssr:
```
[vite] (ssr) Error when evaluating SSR module $vinxi/handler/ssr: Cannot read properties of undefined (reading 'update')
at eval (/home/tony/Code/start-basic/src/routeTree.gen.ts:65:62)
at async ESModulesEvaluator.runInlinedModule (file:///home/tony/Code/start-basic/node_modules/vite/dist/node/module-runner.js:1049:5)
at async SSRCompatModuleRunner.directRequest (file:///home/tony/Code/start-basic/node_modules/vite/dist/node/module-runner.js:1271:61)...
slug pattern for tsr that doesn't involve multiple rounds of encoding/decoding?
i tried explaining the various patterns i've attempted for this, and this message just got unnecessarily long, so rough overview is
- i'm encoding/decoding my
title value at the route level with param parse and stringify. this makes life really easy as i can just route using my title, and it will become a slug for free
- because i'm doing this, i lose casing in the process. this means that when i look up the record by title in the route, i'm looking up with a fake title that has lost the true casing
i have a solution now where i look up by slug instead, and this works (but now if i need this param to be used as a title anywhere else that i can't access the data from db, the decoded title may not be cased properly). Just wondering if anyone has general guidance, i don't really love any of the solutions i've come up with...Resetting search parameters when leaving a location / route?
I'm using search parameters for pagination vales like page and offset. When navigating away from a route with a table that uses these, to a different route that also has a table that uses page and offset, I want those values to be reset. Is there some way to solve this in the route setup (ie with onLeave), or do I have to do what I do now, setting these search paramaters to 0 on every mavigate/link in the page?
TS error "unsafe assignment of type any" using `Route.useParams()`
```export const Route = createFileRoute('/_user/learn/$lang/$id')({
component: RouteComponent,
})
function RouteComponent() {...
Help regarding directory based routing
I have this weird case where I need two layouts for protected and public routes
public -> /login|forget-password (those share a layout)
protected -> /dashboard|users (those share a layout)
...
Grabbing window.location.origin in ssr best ways?
this might be a dumb question but my page is using ssr to render but i need to pass window.location.origin but that wouldn't work from the server, right? any workarounds people might know? Or does it make sense to just store my website's url in an env var?
```ts
export const Route = createFileRoute("/_auth/$pathname")({...
Link & startTransition
Hello everyone !
I am currently facing an issue with the usage of suspense in Tanstack Start.
This is my setup :...
beforeLoad -> loader question
Hi all.
I've been enjoying the Router but I have a quick question.
In beforeLoad I make a check if context has a key value pair and I fetch the data and store it to the context....
Loader called twice on the server, cause = "enter" and "stay"
Is it intended that the loader is called twice for a very minimal setup? Queries are deduplicated using tanstack query in my setup, but for instance I have a server function outside tanstack query that is being called twice.
The loader is called twice on the server with cause = "enter" first and then "stay"?...
Doc example improvement
Hey, I was looking at some tanstack router examples and was wondering if
const [filterDraft, setFilterDraft] = React.useState(filterBy ?? '') was a bad practice, why do we duplicate the url state into a useState in this case ?
https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink-file-based?path=examples%2Freact%2Fkitchen-sink-file-based%2Fsrc%2Froutes%2Fdashboard.users.route.tsx
Can't we do something like this instead:...Property 'isNewUser' does not exist on type '{}'** Route.useSearch
I'm using TanStack Router and have defined a search schema with
isNewUser as an optional string parameter:
```typescript
const dashboardSearchSchema = z.object({
isNewUser: z.string().optional().default(""),...When to use tanstack query for loader functions
Hey all,
Following the example here: https://tanstack.com/router/v1/docs/framework/react/guide/external-data-loading
I am using ensureQueryData in my loader to fetch data....
What is https://www.npmjs.com/package/@tanstack/react-router-with-query
I saw jherr user it in one of his videos but can’t find any docs for this package…
Also are there any docs for create ts router app?
create ts router app always includes tanstack/start, is there a way to just create SPA with tanstack router?...
SSR Docs incomplete? What todo with `main.tsx`
I used this guide to migrate: https://tanstack.com/router/latest/docs/framework/react/migrate-from-react-router
Worked great! However, now I want SSR to have param specific open graph and twitter images. The guide for SSR lets me create a
entry-client.tsx and a entry-server.tsx however in my vite world i just have main.tsx and unsure where to continue. This is a missing part in the docs I think.
https://tanstack.com/router/latest/docs/framework/react/guide/ssr...How to achieve a slot pattern in a Tanstack router?
#react-router, #dynamic-navbar
Requirement:
- I have a top navbar which renders profile dropdown which is the same across the app.
- Another section of this navabar is the dynamic section.
...