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
Navigating to an external route in beforeLoad
I currently have an app that verifies if a user is logged in or not. If not, we want to redirect them to our homepage. The problem is that our homepage does not use tanstack router so the navigate function gives us a type error. Normally in this situation, I would just use window.location to redirect the user but I also want to prevent the route component from loading.
Does the router have a way to redirect to routes “outside” of the routes it knows about?...
Load virtual routes absolute path
Hi! I didn’t see anything in the docs for this. Currently, it seems that loading a virtual route file via an absolute path is not currently supported. I can sort of work around this by building a relative path from an absolute path but I wanted to check to see if I was missing something
Are links supported in createRoute(), and not just createRootRoute()?
We seem to not to be able to make these work on normal routes, and only have them work on the root route.
navigate is not work when CatchBoundary is work
navigate is not work when the component have CatchBoundary and it catch error of child route beforeLoad function throw.
I want to use CatchBoundary component to catch child route error, keep the layout not change, but i navigate is not work after the CatchBoundary catch the child route error.
this is an reproducible minimal library：
https://stackblitz.com/edit/vitejs-vite-mqaspb?file=README.md
#router-questions...
Authentication using React hooks does not re-trigger beforeLoad
Hi, I use a react hook
useInternetIdentity to login the user and want to set that up so that the user identity is available in the router context.
This works well.
But, changes to the login state does not trigger a new beforeLoad on the route. When the login state changes because the user logs in or out, I can see the identity in <InnerRoot> update. But, this does not trigger a refresh of the route. ...protected routes
I understand that it is insanly important that we add the
beforeLoad in a __authenticated.tsx file but what I don't understand is how to create a wrapper around my project to check the add that check. Could someone help out a big noob understand here? 🙂
Wops! This is what I have read. Please highlight what I have missed.
https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes...How can I use zod discriminated union for search params?
I have a list of search params and some of them should not be present if a search param (let's say it's called mode) has a certain enum value. I've tried various things but no success
What's the proper way to integrate with react-oidc-context?
I am using ...
react-oidc-context for auth, I want to integrate the router with it, but I do not want to go into the app without auth being loaded
const auth = useAuth()
auth.isLoading // This is a boolean
const auth = useAuth()
auth.isLoading // This is a boolean
Add file type to API route
I am trying to create an API route that generates custom meta images. I have successfully done this. But I am unable to add the
.png file extension for the path. How can I create an API route like '/api/images/meta/$id.png'?Route rewrite before route parsing?
Our hash-based routing app is called by an external system which we can't change and which adds an additional # to our url, which has to be removed before the router parses the route.
The app is called under
foo.com/draft/#/login?#access_token=eyJhb . As you can see, there is one # too much before access_token.
How can we rewrite the route before the router does the parsing to remove this second # ?...
Are there plans to have an RPC-like thing for api routes?
I was just curious if there are any plans to formalize api routes having an RPC client.
RPC).
For example it would be super cool if you could
createServerSideFn({apiRoute: "users?id", method: "GET" }) or something like that...Get window width on server
Hi all! Please forgive me if this is a silly question. I am relatively new to SSR (via react at least) so I am struggling to do this properly. I have a component that needs to measure the window size to determine what border radius to use. Obviously there is no
window on the server so I have to wait until the component renders on the client. But, I am getting a flash of incorrect style on the client before I measure the window and set the correct value. Is there a way to get window width (or at least browser type, etc) on the server. I started of with a useEffect solution and have now moved to a useState solution.
```js
const [sm, setSm] = useState(false);
...Use « useSearch » in the root page
Hello !
Why it is not possible to use the hook useSearch in the root page when the matched page is not “/“
...
How to check for auth with Clerk and Tanstack Start?
Hello,
I followed the guide from Clerk: https://clerk.com/docs/references/tanstack-start/get-auth
The way they are creating createServerFn, seems to be outdated now, and I'm not quite sure how to get the request:...
Edit and update loader data / Update useState after router.invalidate()
Hi, i want to build a page with a router loader where the user can edit an
<input> and the backend is supposed to simply append the string "foo". When the user hits save, a POST request saves the data and nothing but 200 OK is returned.
To update the view, i want to call router.invalidate() to update using a GET request.
This works up until the useState for the <input> because useState ignores when it's parameter changes value.
How do i solve this issue? Is there a best practise for being able to edit and update data from a loader?...Get the `from` location when user navigates
I am using Tanstack for the first time and could not find the answer to my current issue.
I want to get the from location inside a component. That is , from which path did the user take to come to the current component . Inside from my component , I want to later navigate back to the
from address. How could I do this. Thanks...How would multiple apps with Vite and router looks like?
I have currently a mono repo and want to migrate it into one package with just multiple starting points via ENV variable. How would that work in terms of the typescript types? Its all together 4 apps with different routes but all share the same UI kit, backend and thats why it would make sense to just run them in one package. The mono repo gives me headache and I would love to get rid of this complication.
Accessing Cloudflare Pages Environment Variables
Hello, can someone please explain how I may access the environment variables within my Tanstack Start application, deployed to Cloudflare Pages?
Where do I set up the Cloudflare context?...
Is using tanstack query inside the route's loader function deferred by default?
Hello I'm new to both tanstack router and tanstack query, but very interested in them. This is an example code from the docs when using tanstack query inside the loader function:
``ts
export const Route = createFileRoute('/posts')({
// Use the loader` option to ensure that the data is loaded...