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
Redirect from NotFound component
Hey !
Use redirect from root not-found component causes unhandled error.
How to redirect from not-found page without using window.location ?
...
Multiple path params?
I'm having trouble with multiple path params. I have a wiki structure, e.g.
```
handbook.tsx
handbook.$slug.tsx...
Using Tanstack Router with WebSockets
Hey, I'm making a webapp (SPA) with React and WebSockets. I want to have access to my socket in any part of the application, I thought about using a singleton approach and instantiate it in the main.tsx. However, I would like to still be able to use the tanstack redirect methods. So what would be the best way to implement something like that?
I'm having issue where useLoaderData returns undefined during SSR (Start)
I'm using TanStack Start and having issue that useLoaderData returns undefined during SSR. It works during client-side or soft navigation. But if I reload that same page, useLoaderData returns undefined.
Is naming files *.lazy.tsx for pages required for lazy loading ?
Just a quick question, as the intro quick start seems to suggest you should.
Having two similar views in the same app
What is the best way to structure the routes in a react app using tanstack router to have two different views, they both sometimes use the same components and also have unique ones
An array of filter with same name. ?category=4&category=3
I am migrating a nextjs app. The nextjs app has a category filter array. How do I do this in tanstack router?
Display Error when Error in context RouteOption?
In a
createFileRoute() I have, I'm loading data from localstorage and putting the result in my route's context. How would I gracefully handle when the data in localstorage was corrupted and unparsable as JSON? Right now, my code throws a runtime error and my react app doesn't render. What I'd like to happen is the errorComponent be rendered.
```typescript
xport const Route = createFileRoute("/$sessionId/_wizard")({
component: RouteComponent,...Unexpected Behavior with Unused Server Function in TanStack Start
Hi everyone!
I’m facing an issue where an unused function is causing my application to misbehave. Specifically, when I include the following
authenticateUserWithoutAPI function in my code, even if I don’t call it in any beforeLoad or other route handlers, it causes problems like:
1. The Clerk sign-in component not rendering.
2. The TanStack Router dev tools disappearing....Yup adapter
Is there an existing adapter so that search params validation in tanstack router can be handled by
yup schemas? At work we're pretty bought in on yup (and its integration with formik), and I don't see us switching soon (even though it's definitely on my roadmap!).
If there is none, I will have to write it, so I guess my secondary question is: is there interest for this to be open source? Or even integrated to the tanstack org once we have it working?...Authentication
Hello everyone
How I can handle authentication using Tanstack Router?
Is possible to redirect to the login page when axios return a status code 401 and redirect to dashboard when access login and already have a
httponly cookie with authentication token?...TanStack Router vs React Router V6 -> V7 (Stable) - Which is better?
Which provides more capabilities and a better developer experience? I've ran into some warnings of React Router V7 (RR7) still using Vite 5. In addition, using the new Framework style of RR7 - namely the Router Provider Framework style, there seems to be a weird injection of clientLoader, Loader and converting the routes to use this (https://reactrouter.com/upgrading/router-provider#1-move-route-definitions-into-route-modules). Seems to be Tanstack Router is cleaner, but I'd love to know the com...
href prop not working on `Link` component?
I am confused. What am I missing?
https://stackblitz.com/edit/tanstack-router-tn3dvcbd?file=src%2Froutes%2Findex.tsx
I have a Link component with
href set to "https://google.com". I would expect this to display an anchor with that URL...How to Link to same route (dynamic) with different parameters?
In version 1.53.1 I was able to render
<Link params={{accountId: '456'}} /> without to or from and have it build hrefs for:
- /accounts/$accountId
- /accounts/$accountId/posts/$postId
- ...
...Optionally replace param
I'm trying to optionally replace a route param (e.g.
/$lang/... to /$anotherLang/...).
In practice I'm looking for something similar to useParams({ strict: false }) but for setting parameters.
The behaviour would be:...Change `<html lang>` attribute
Is there a way to change the
<html> lang attribute in a nested route (e.g. /$lang) based on URL params?
Thanks...Rename `/app` to `/src` folder
Trying to make this work, but this leads to problems (in dev and not building...). Tried a lot of config adjustments. Latest is
```
export default defineConfig({
tsr: {...
TanStack Start SSR Hydration Failure when using loader() for Breadcrumbs component
Playing around with TanStack Start and was trying to implement the breadcrumbs component with useMatches() via the loaderData defined during createFileRoute().
```javascript
// _main.tsx
const matches = useMatches();...
Redirect to another website if missing search params
Hello folks, from our main website we select the items etc and then user clicks on "Proceed" and they navigate to our SPA and we pass some search parameters like IDs, some flags, etc. All of them required, if one of them is missing we should redirect back to the main website they came from.
Currently if the paran validation fails, I just display the general error screen and validate if error.routerCode === "VALIDATE_SEARCH" is true, then redirect the user to our main website.
Is this the better approach? I dont wanna make our general error screen dirty, can I do the redirecting in the beforeLoad or something like that?...
Search params in loader (unclear part of the documentation)
Hi, I'm reading the documentation related to the rationale for not having search params directly available in the loader and I'm not sure I understand the rationale 😅: https://tanstack.com/router/v1/docs/framework/react/guide/data-loading#using-search-params-in-loaders
Assuming the router scopes each request based on pathname + search params, in what case would using search params (vs different route segments) cause the issues described in the section?
-----...