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 render two routes at the same time (route inside another route)?
I have two panels of content on a page, side by side. One is quite basic, just some information that I'm getting, and is a perfect candidate for SSR. The other panel is more advanced, based 100% on user interactions and doesn't at all make sense for SSR. That's why I'd like to separate into two routes.
I was thinking that if I had these routes:
```
/$post.tsx...
Question about context propagation
Say we have structure like this,
```
routes/
__root.tsx
index.tsx...
Handling loading states when tanstack router and query used together
I am using Tanstack Router and Tanstack Query. I have a page (say index) like this.
```
<div>
<SearchComponent>
<TableComponent>...
Route's beforeLoad behaviour
I've been working with TanStack Router, and I want make sure I understand this well. Say, I'm fetching some data in the beforeLoad of a route (eg /dashboard), and this data gets fetched whenever I load the dashboard page or any other page under the /dashboard route. What I want to know is, when moving between different pages under the /dashboard route using Link or navigate, does the data get refetched with each page I visit?
Deprecated plugin
How come the router plugin is deprecated but when i use create-tsrouter-app this is the default.
v1.117.1 Doesn't Render Pending Component Instantly
After upgrading to the latest version of router, I've noticed that there's a screen flash (to an empty screen) before the pending component renders.
https://www.loom.com/share/9bda2fdbe0ac4e629d41855b5c66c6ac
The issue seems to be from this PR: https://github.com/TanStack/router/pull/4044/files...
Confused by isTransitioning (never true)
Hi folks.
I am confused by useRouterState`s isTransitioning.
When does it become true?
...
Multiple apps listening/modifying history
Hi, I have a micro-frontend architecture with a container app having a page-based router.
I want the micro-frontends mounted in this container app to be able to listen to and update search parameters in url, as they will store their state there.
Is there a way for them to do so?...
Passing data between routes
I am using Tanstack Router and Tanstack Query.
Let's say we have a route that does a search. We have a form that accepts "code" as a search input. When the user click search, that value of the code is put into the url as search parameter and this useQuery is enabled.
```
const {data} = useQuery({
queryKey: [{entity: "stocks", scope: "search", code: "<value from code input>"}],...
notFound data always nested in data.data, and props.data type is unknown
Hello)
In defaultNotFoundComponent, props.data is typed as unknown. At runtime, props.data is an object: { data: T, isNotFound: true, routeId: string }.
The user-provided data T from return notFound({ data: T }) is unexpectedly nested under props.data.data...
Custom `create-tsrouter-app` with example
Hey, do the custom examples work on
create-tsrouter-app like in next.js? I wanted to create a new app with custom example repo, like in next, but it doesn't seem work work. npx create-tsrouter-app --example <link>Access Search Params from Head
How do i access SEARCH params from router HEAD func?
I dont see any way to get access this -- any help would be appreciated...
Issue with Route masking
Good day, I'm encountering some issues with route masking. I did my best to describe the problem here with a reproduction: https://github.com/TanStack/router/discussions/4655. I would appreciate any help I can get. Thank you.
NotFoundComponent defined at the route level not rendering.
Consider this folder structure.
```
__root.tsx -> notFoundComponent defined
settings/
route.tsx -> notFoundComponent defined and <Outlet /> returned...
Optional path params with groups
Is it possible to use optional path params with route groups so that I don’t have to repeat the param in every route path?
In the file based example i tried moving about.tsx into a
({-$locale}) similar to the advanced i18n with route groups example, but it's not matching /test/about like it does when the folder is named {-$locale}.
Am I misunderstanding how ({-$locale}) works in route groups?...Is it possible for a parent route to wait for all of its children loaders?
I have a root route that loads user authentication data, so this is loaded regardless of which route is accessed. On the initial load, I would like to load all of the data necessary in one go to show a single loading spinner and have it render the entire page without different parts flickering. Here's a screen recording of the behaviour.
What I would expect instead is for the white screen "Loading..." to not disappear until all relevant loaders have finished
Related github issue: https://github.com/TanStack/router/issues/1705...
How to load more than one external resource in loader with React Query?
Hi There!
I'm trying to find out how to load more than one resource from the backend for one route, with Tanstack Query and unfortunately they do depend on each other.
Here is the example code from the docs for using Query, but I really could not find any way to have more than one query depending on each other before the route is rendered.
Could somebody point me in the right direction? Thanks!...
Automatic code splitting causing route files to import from my entry point (circular)
Hey, everyone! I'm running into a strange issue with automatic code splitting. Essentially, I have a SPA which has an entrypoint of lead-journey.js. My vite config is adding these imports to my index.html:
```
<script type="module" crossorigin src="/assets/lead-journey.js?v=17719289870"></script>
<link rel="modulepreload" crossorigin href="/assets/utils-C-Suy_BF.js?v=17719289870">...
Typing the `location` in the `loader` function in `createFileRoute`.
Hi, I've searched all through the internet but I cannot find a solution. I currently have this Route declaration:
```tsx
export const Route = createFileRoute('/configuration/locations/')({
validateSearch: rootSearchSchema,...