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
defaultPendingComponent shown for routes that have no loader specified
See this reproduction: https://stackblitz.com/edit/tanstack-router-mbfafp?file=src%2Fmain.tsx
Even if I have no loader specified, the
defaultPendingComponent is briefly rendered, and thus sometimes visible. This becomes more obvious when defaultPendingMs is set to zero - we will see the (unnecessary) pending component for half a second (the default of defaultPendingMinMs)
I think the pending component should only be rendered for routes that have a loader, right?...data loading with nested routes
I have two nested routes, both have a loader defined. As an example, the parent loader takes 2 seconds and the child loader takes 1 second. I can see that the loaders kick off in parallel, but I an see the pending components being rendered as soon as one loader has finished.
This means that after two seconds, the parent route renders, and I see another pending component for the child route for one second. According to the docs, I was expecting one loader for 3 seconds (unless I use defer):
TanStack Router is designed to run loaders in parallel and wait for all of them to resolve before rendering the next route....
directory routes
I have a question on directory routes:
https://tanstack.com/router/latest/docs/framework/react/guide/route-trees#directory-routes
looking at the
posts directory with index and $postId.tsx
...pendingComponent of a nested route not used
Hey 👋🏽 ,
I don't understand why a pendingComponent is not used.
Here's a nested route def...
testing in tanstack-router
Is there any repo to have a look using Tanstack-Router & Tanstack-Query to see how can we test them?
I haven't seen too much information, and there is no doc for this. It would be helpful to know how setup a testing environment for routes that use lazy loading, etc...
Router and app flow
Imagine an app with several pages, and you need to implement an app flow which is dependent on different parameters.
Example: you have the start screen. Depending on the user’s type and level and whether they have used the app before, they are then directed to a tutorial or skip straight to main page. Tutorial has different versions depending on the level, from where they are redirected to main as well. They then do something in main, then either get redirected to a screen with a success message, or a screen with a failure message. Maybe there is also an info page that can be accessed from every page.
The user is expected to start on start screen and then is directed through the app. They can not start somewhere in the middle.
...
Creating a Styled Component with Link breaks typing
When creating a Link styled through styled components, my
to, params and potentially other props losing their type safety. Using Link by itself works as expected however.
https://codesandbox.io/p/devbox/twilight-mountain-lts8jw
Note the usage of the styled link and how i am able to pass in anything to those values...Navigation bug when tabbing out of browser, maybe?
I am currently developing an app with Tanstack Router, and I love it! But I am encountering one problem. Whenever I move my browser out of focus (By clicking on another app on my pc), and then click on my browser again, I am not able to navigate to other pages? I can click my navigation buttons, and the URL in my browser changes, but the content of my app does not change to the new page?
I am not getting any errors, or any other information, so I do not expect to get an answer. I am just curious if anyone has experienced this before?...
Wondering how to setup this structure via Directory routes?
Say I got these routes:
```
/
/auth/login
/whatever...
How can I change the default "/" route to the index route?
Is there a way to use a different URL route, such as "/home", as the default route instead of "/"?"
Layout segment still reachable route
I have the following url structure:
/$id/_layout
/$id/_layout/post
...onError does not trigger
Simple repro in
about.tsx: https://stackblitz.com/edit/tanstack-router-meaitd?file=src%2Froutes%2F__root.tsx,src%2Froutes%2Fabout.tsx,src%2Froutes%2Findex.tsx
onError never seems to be called....Why can't use errorComponent in createLazyFileRoute?
I try to use errorComponent in
createLazyFileRoute but the component didn't show up when error happen from loader. But when i put errorComponent in createFileRoute it's working like what i expected (the component show up).
I want to know why it's like that because in https://tanstack.com/router/v1/docs/framework/react/guide/code-splitting errorComponent is supported by the createLazyFileRoute
this is minimal producible example: https://stackblitz.com/edit/tanstack-router-gtkrcc?file=src%2Froutes%2Findex.lazy.tsx
...<Link preload="intent" ...> triggers navigation on hover
I haven't been able to repro this in a small demo as of yet, it seems to only apply to certain links. I've only reproduced it when
to="/", and I can get rid of the error consistently by changing preload={false}.
(Also another weird note, sometimes the <Link> component doesn't let me pass preload={false}. TS error attached)...Navigate to a new tab
Hello guys, whats the best way to "open a new tab" with react router? I just need to open a new tab for another app. Im not sure if I should tanstack-router for this?
Vite Plugin - Code Generation issue
A member on my development team implemented tan stack router in our application and was showing off the auto generation feature with Vite on his Mac.
While the app was running he was able to add route files to our routes folder and Vite would pickup the change, triggering the plugin to generate the code boilerplate in the new file and also adding to the generated route tree.
However it doesn’t work the same way on PC for the rest of the team, we have to stop and then restart the app in order for the code generation to trigger.
...
Invalid route is redirecting back to "/"
Repro: https://stackblitz.com/edit/tanstack-router-fw4wfg?file=src%2Froutes%2F__root.tsx
Only thing I added is a link to "To not found", and a defaultNotFoundComponent.
When you click on this link I would expect the user to be shown the not found component, but instead they are redirected to "/". How can I fix this so users are actually shown the not found page?...
Best folder structure for code based routing
Hi all any one can tell me what is the better folder structure for code based routing without specifying one file in route.
createLazyFileRoute with loader
This is probably obvious but it isn't clicking for me — why can't I create a lazy file route but also set a
loader or beforeLoad function?skip beforeLoad validation
I have the following problem. My router folder has this structure
- _authenticated(dir)
- auth (dir)
- update-password.tsx
- more auth related files...