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
Is there a way to cancel a navigation event in Route.beforeLoad?
Am building an Electron app, where we want some urls to open in a separate window. We would like to handle this on a router or route level instead of manually opening popup windows.
Trying to accomplish this by checking for specific urls in the root route beforeLoad method, but I can't find a way of cancelling the navigation event....
combining react query and defer
I have a page that displays
articles and tags however I don't want to wait for the tags to load before displaying the articles.
Is this the correct way to combine react query , ensureQueryData and defer to achieve this result?
The full sandbox is here:...Re fetching with React Query when the URL changes?
Hi all - I've been trying to implement a system where a paginated API call is made using React query but using the URL parameters to control the requests using the Route API and the recommended approach for search parameters. I've been experimenting with the loaderDeps but can't seem to get it working. For instance increasing the page number by 1 is intiated using a <Link> taking the user to the search url page (+1) and I was hoping then would re request through react query with the updated fil...
Cookie based authentication approach
Hello all. I have a cookie based authentication approach. In my login page and in my _app layout i have a
beforeLoad function like this:
login.tsx
```ts...Best way to do optional path params (for i18n)? Virtual routes?
Hey everyone! We've been experimenting with Tanstack Start and Router for a frontend refactor of an app we have.
One of the requirements is optional path prefixes for i18n, i.e.
/todos/:id should be identical to /en/todos/:id if en is the fallback language, otherwise prefixes are specified for all other languages. Is there a way to achieve this with router?
We've been trying with virtual routes, but it seems codegen goes all over the place when you combine root-level virtual routes with Tanstack Start. With every combination we tried the codegen hangs trying to generate routes....How to use context data in a loader
Hi, I'm confused about using data from the useAuth hook that returns the userId. How do I use it in the loader where the userId is already in the context?
Persist URL Parameter Across Navigations
Hi everyone,
I'm using TanStack Router and I want to set up a specific URL parameter (named commit) at the root route level that should persist across navigations. If the parameter has a value, I want it to be retained automatically when calling the navigate function, without needing to explicitly handle it for each navigation event.
I couldn't find a straightforward way to implement this behavior. Does anyone have suggestions on how to achieve this? ...
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)...