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
Importing generated router file causes nitro startup error
Hi!
I am using tanstack router with vinxi and trying to get ssr working
(before you ask I have reasons for not using start although it is very cool)
...
apply/set search param in component.
Hi,
How can i apply a param to my url when the page loads?
I'm using a system that generates a unique ID.
in their own examples they are doing something like....
getRouteApi().useParams() infers non-nullish value "{}" as type
When I access the route params via
getRouteApi().useParams() the return value includes the correct params but also {} (twice).
It works fine when using route.useParams() or useParams({ from: "/about/$name").
Did I something wrong?
Repro: https://stackblitz.com/edit/tanstack-router-qc3zv7?file=src%2Fmain.tsx...is there anything like useActionData() in tanstack router?
In react router v6 I have used the useActionData() hook for getting the return value after submitting a form in the action method. I was looking for something like this in the Tanstack router? Is there any hook like useActionData in Tanstack?
https://reactrouter.com/en/main/hooks/use-action-data...
Any strategy for authenticated routes as the default instead of unauthenticated?
Right now it seems suggested to use
_auth/ + _auth.tsx to create protected routes (or _auth.whatever.tsx if you're doing the flat thing) which works fine but it feels a bit weird if majority of your routes are auth.
There's a hypothetical situation that someone has 20 protected routes and 1 unprotected route. In this situation it would feel bad to just have one layer of nesting whether it's in a file name or nested folder for your default case.
Is there a better way to do this? My brain might be fried but I can't think of anything at the moment....Typescript error at useNavigate with params
After update to the latest version I see Typescript errors on navigate with params. Has someone had similar issues?
```
const spaceIndexRoute = createRoute({
getParentRoute: () => rootRoute,...
Context-based authentication
Good morning. I'm trying to authenticate with a context following the example from the docs (code below, but there isn't much to see).
I have verified in the context itself that the value
isLoggedIn is changing (with a useEffect much like the one in InnerApp below, but obviously in the context itself ). However, although InnerApp is subscribed to the auth context, it never picks up on the change.
It seems I can't use router.invalidate() inside of the context itself without running into errors about the Router context being undefined, but I am running it inside of the Login component when a user successfully logs in. In other words, the router context should be refreshed since it is invalidated on Login (or Logout). ...General Navigation with Previous Search
When I do the following I get a TS error:
``tsx
// product: 'apple' | 'banana' | 'orange'
const navigate = useNavigate({from: /fruits/${product}`})
//......providing an action in file-based routing (createFileRoute)
I am looking at this example - https://tanstack.com/query/v4/docs/framework/react/examples/react-router - which integrates react-query with the tanstack router, using actions and and loaders.
However, using file-based routing, it does not seem like
createFileRoute accepts an action (at least the intellisense/TS defs indicates that it doesn't):
```ts...What is the type of the parameter passed to the load function in createFileRoute?
export const Route = createFileRoute("/_home/payout-orders")({
component: React.memo(PayoutOrders),
loader: async (param: T????) => {
}
}...
Getting proper `Link` types for own components?
Love the new additions and documentation for
createLink(), thanks for the great work!
We have a few different button components, e.g. PillButton, FlatButton, etc. and it supports a tag prop that can be set to any component which will be used to render the button. We've been using it by passing a link:
```tsx...Suspended queries in route
I have a root route with a default pending component.
A child route defines a loader using ensureQueryData from tanstack query. I'm using the default pendingMs and pendingMinMs which is working as expected.
In the child route, i'm using a useSuspenseQuery hook to fetch data based on some conditions. (I can't use the loader in this case because i'm staying on the same route)...
authenticated routes approach
Hello guys, this is the auth routes example in the docs. The other image is my auth setup. Do you have any other preference/example to have a look at? I'm not sure how to handle dozens of dozens of routes and I dont know if adding _auth. prefix to each route would be the best approach ? Maybe yes? Any suggestions?
TanStack Start with SPA
I use Router w/Express for a production app (and it's great, thank you!), but for a new app I'd like to skip the Express part, but still use a react SPA with some basic API routes. Is this supported with Start? Even if it's requires a custom vinxi/app config. Thanks!
Loader doesn't get router context
I'm trying to use a TanStack Query queryClient in my loader that I pass through context, but the loader is not detecting the context. I'm wondering if I'm doing anything wrong.
```typescript
import React from 'react'
import ReactDOM from 'react-dom/client'
import { RouterProvider, createRouter } from '@tanstack/react-router'...
skip files during routetree generation
Is there any way i can skip files inside the route folder during routetree generation ?
Is there a way to have Rewrites or Proxy?
Posted this on Github discussions too, but not sure if that's still active. Sorry for the spam!
This might be a dumb question, but I couldn't find any docs for it, so I might as well ask.
My team is moving away from Nextjs (pages) and moving to TSR (tanstack router with start/vinxi)....
Client headers do not get passed to API routes called in loader/beforeLoad {TanStack Start}
I wanted to create an architecture where I have an API and frontend together using TanStack Start whilst having SSR so I tried to achieve this using the API routes provided by the framework.
But when I want to fetch data from authenticated API routes in the loader the client's cookies/headers containing authentication info don't get passed to API.
The only method I found to resolve this is to wrap the API call in a server function and use the
getHeaders() function to pass the headers to the fetch call.
```ts...Clerk Setup with authenticated routes
I'm experiencing some issues with setting up my authenticated routes with Clerk. I see the examples with Start and the createServerFn function but I am only using react router.
In all of the examples the authentication method seems to be fully syncronous, but with Clerk and the useAuth() method, the data may not be immediately loaded. The workaround i found was to check if auth.isLoaded before proceeding with my RouterProvider. But this creates an annoying extra loading page.
```...
Automatic Code Splitting with separate component file.
I wasn't able to find a clear answer in the docs relating to automatic code splitting and having the component in a separate file. I know it says not to use the .lazy suffix with automatic code splitting, but how will code splitting be affected if the component is in a separate regular file that doesnt have the .lazy prefix and is then imported into the route? Thanks!