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
How to use useSearch from multiple routes?
I have two routes
/posts and /posts/$pId. The /posts route defines search params with validateSearch.
In a custom hook I use getRouteApi("/posts") to receive the useSearch hook and access the search params. That's fine so far:
```...Read from ReadableStream on page load
Potentially stupid question but suppose I'm trying to do something like Claude where you ask a question from the home page then redirect to the chat page with a response immediately streaming in. How would I properly read from the stream following the rules of react?
My current setup is using tRPC to send a mutation on the home page and get back a
ReadableStream for the AI response, then passing that stream to the chat page with router context. In the chat page I'll start reading from the stream in a useEffect, but I don't think it's possible to make that effect pure? Since when you attach a Reader to the stream and start reading, you can't abort the read so a cleanup function that detaches the reader could cause an error where the reader tries to read from the stream when it's already detached.
I suspect my general approach to this could just be wrong, would love any suggestions....Loading component only on initial load?
I want a loading component to only show on log in or full reload, as that's when the majority of loading will occur (so this will live in my
_authenticated routes). Is there a way to achieve this? If I set a pendingComponent, this will just run on every page. Maybe I can just use React to achieve thisHow to block, if user wants to leave a route-tree?
Hey 👋🏽 @Sean Cassiere @Tanner Linsley ,
I have a
create-order route with multiple steps. So the route-tree looks like this:
create-order/step-1
create-order/step-2...Typescript error with Vite + file based routing
I upgraded all my router dependencies but receive typing errors.
Auto-redirect when accessing a route
Hey everyone, quick question: how do I automatically redirect a user from my-url.com/courses to my-url.com/courses/in-progress?
Maybe I could use the beforeLoad option?...
How to avoid "loading" state when using beforeLoad
I'm using TanStack Router and Query in my React project, and I'm trying to conditionally handle the beforeLoad event based on the presence of a token in local storage. When I even have empty beforeLoad the pending state is appearing even for second. Here's what I'm trying to achieve:
No Token: If there is no token in local storage, I want to skip the beforeLoad entirely to avoid showing a pending component.
With Token: If a token exists, I want to trigger a request to my API to fetch user data during the beforeLoad event....
Optimizing build/bundle size for specific pages
Hey, I'm new to TanStack router so I have a few questions about making a good build for a webapp. I'm using Vite/React/TanStack Router to create a webapp with authentication, and I want to make sure the login page loads as fast as possible and has a small bundle size.
Currently my routes look like this (all routes in the
_auth directory are for when the user is logged in, all the routes in the _public directory are for when he is not):
```...Prevent `component` from rendering when `beforeLoad` throws an error.
This is my root router, and I want to prevent
component from rendering its content when an error is thrown in beforeLoad.
The docs says the following
This async function is called before a route is loaded. If an error is thrown here, the route's loader will not be called and the route will not render...
How to retrigger the pendingComponent when using `useSuspenseQuery`
Hello everyone! I have a posts component that is a list of posts, and a button that caps the limit of the amount of posts to 10. When loading this route initially I have a
pendingComponent that reveals my pending ui. When I click the limit button I want to retrigger this pending UI, and then rerender the data in my component with the updated data
What actually ends up happening is that it refetches my /api/posts endpoint, and then the component rerenders, but the pendingComponent doesn't come back or show.
Here's my component structure...How To Get Previous URL
Is there a way to get the previous URL (the URL of the page that was navigated from) in TanStack Router?
I already know how to store values in search params , path params or state params, so please let me know if there are any other way....
Documentation in code
Hi, is there anything i can do to get better docs in my code than this? I find myself having to dig through so many types just to see what's happening or what options I can pass to a function. Am i missing a package?
Unable to change the title dynamically per page
This is probably a stupid question, but I'm not sure how to dynamically change the <title> aspect of the main html file. Doing it like something below does work however it's a messy implementation. Any ideas?
_root.tsx
```tsx
import * as React from 'react'...Preventing a specific query from triggering `onError`
I have the following client setup
```ts
export const queryClient = new QueryClient({
defaultOptions: {...
Is is possible to use the same component for more than one route ?
I am migrating my project from React-Router to TanStack/Router. I have a component X that manages 2 routes /create and /:id/edit and based on the api calls I do inside, I handle the logic. Using TanStack/Router, I noticed that it's not possible to use the hook useLoaderData for each route in the same component. How to handle this problem? Is the only solution to split the logic ?
Debug response with line number?
Hey, this might be super stupid question.
My IDE doesn't report any TS errors but when running i get e.g.
```
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it....
Navigate to child pages from parent
I am build a React application with Tanstack Router. I have a problem navigating to child routes from a parent route.
I have a setup of routes like this:
- auth:
-sign-in
-sign-up...
Should .ts files be ignored by default with file based routing?
In my
routes-folders I created a .ts-file (beneath the .tsx-files) . After creating the file, the generator plugin generates the typical createFileRoute in that file (and also includes the routes in routeTree.gen.ts). Obviously this does not work, as a .ts file does not support JSX syntax. When removing the generated code from the .ts-file the code is not generated again, but the "route" is not removed from routeTree.gen.ts (which is inconsistent imho).
I didn't found something in the docs nor the source code, so my question is: should .tsfiles be ignored or is it correct that the generator treats them as route files? Personally I'd like to see them ignored, because then I could easily co-locate non-UI files (data loading code, hooks, etc.) with my route files....Update URL hash without scrolling to the element?
Is there a way to change the url hash whenever the user clicks on an element without causing a page scroll? I only want the page to scroll when the user navigates to the url with hash for the first time or reloads the page.
Matches after route Param
Hello! I have a simple file based route layout with a parameter for a venue slug (TSR 1.48.1):
`routes/
venues/
$venueId/
index.tsx...