TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

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

adverse-sapphire

1/29/2025

path: '/', is generated unexpectedly

I have 3 group routes, as shown, and only the (public) group has an index.tsx but a / path is generted for the (protected) what is even weirder is that the (auth) did not generate for this path

ambitious-aqua

1/28/2025

Trailing slash when SSR, otherwise it's ignored

I have a route config that looks like this: ```text routes/ ├── app/ │ ├── games/...

provincial-silver

1/28/2025

Using Router with React Context/Hooks

I used the examples in the docs to set up my React context and hooks so that they run before Router and inject the values into the Router context. However, now I have a chicken and egg problem, where I need some of the URL params in my hooks (I used useMatches from React Router), but I don't have access to the router to get those params. And when I manually try to extract different params with regex (very hacky, not scaleable), I still get issues of race conditions when navigating directly to a...

environmental-rose

1/28/2025

How to show root level page not found when I have nested routes with pathless route.

I have this dummy project, at this moment I am able get page not found at root level, but I don't get when the route is /auth/* or /auth/login/* or /auth/signup/* ``` / ├── about/ └── auth/...

rival-black

1/28/2025

Bypass pendingMs for certain links

I'm looking for a way to bypass pendingMs, i.e. never fall back to a suspense boundary, for certain links. Our use case is that we have a page with lots of filters and knobs for the user to tweak the data that is displayed on the page. When clicking any of the links that apply those filters (as search params), we never want the page to suspend. However, we don't want to set a really high pendingMs for that page either just to avoid it, because then the page will not show it's loading state on entry, which we do want. So basically we're looking for this behaviour: * When navigating to that page, fall back pendingComponent until the data has loaded * When navigating within that page (applying search params), never fall back to pendingComponent...

adverse-sapphire

1/27/2025

can useSearch be used from inside a portal?

I have a component that if the width of the screen is smaller than 992 renders the content inside a portal outside the div that contains the main react app If I don't use the portal everything works as expected, but if I add the portal, the useSearch works as expected when loading, but, when moving to a different page I get Could not find a nearest match! I'm using just strict false as the useSearch parameters, inspecting the error I think I found why this is happening, inside the useMatch function called by the useSearch, its not returning a match (image 1) since my nearestMatchId is /category/_category/$casual (which is the page I was previously on) and state.matches only includes root route and the route im going to....

optimistic-gold

1/27/2025

How to catch chunk loading issues and reload gracefully?

In Vite, if a lazy chunk fails to be loaded, an event is dispatched to the window: 'vite:preloadError'. For reference, I'll just copy the explanation from the vite docs:

When a new deployment occurs, the hosting service may delete the assets from previous deployments. As a result, a user who visited your site before the new deployment might encounter an import error.

https://vite.dev/guide/build.html#load-error-handling When using tanstack/router, the loading of route chunks seems to be handled by tanstack instead of Vite and this event is not dispatched. (Tell me if I'm wrong here, but I couldn't catch it)....

correct-apricot

1/27/2025

zodValidator in Route.useSearch return different types

According to this https://tanstack.com/router/latest/docs/framework/react/guide/search-params#zod I should be able to access my variables with Route.useSearch() but whenever i do it, it gives me the types of parse, input and output. Is this normal?...

vicious-gold

1/27/2025

Cannot get route type for some routes

I'm struggling to get the right type for some routes. The question: Why is my file route campaignDraftsRoute not satisfying TRoute extends AnyRoute but other routes are? I have the following file route:...

fascinating-indigo

1/27/2025

Can I add custom information to RouteOptions?

I'm using TanStack Router with file-based routing and I'd like to dynamically generate my menu from the route tree. In order to do this, I need to have some extra metadata for each route (i.e. title, sort, etc.). Is it possible to add some extra information when calling createFileRoute (or createLazyFileRoute) that I can then access from the route tree data from useRouter or similar? Something like this, perhaps?...

ratty-blush

1/27/2025

Route Re-rendering when using query params on same path

I recently started using TanStack Start with Query and Table, and I’ve run into an issue I’m hoping someone can help with. I have an API endpoint that has "limit", "offset" and "search". These values are passed through query params, and I’m using the useReactTable hook to manage the table’s state. ...

crude-lavender

1/27/2025

Router with azure msal-browser & msal-react

Does anyone have an example with tanstack/router integrated with microsoft's msal for authentication? I have an app built with react router, and when I try use the same msal config and setup, I get an error

uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API.  For more visit: aka.ms/msaljs/browser-errors

uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API.  For more visit: aka.ms/msaljs/browser-errors

However the MsalProvider component does the initialization on my other project, so trying to wrap my head around that one, in case it would be a bad idea if both call initialize....

graceful-blue

1/27/2025

Dynamic value of useSearch() from?

Hello, I'd like to create a custom hook that uses useSearch() hook with with full type-safety. I have 2 almost identical pages, with same search params and I'd like to use this hook only there. Is it possible to allow the useSearch to look either for one or the other one URL as 'from'?

dependent-tan

1/27/2025

Deploying to Netlify and error decoding lambda response errors

Hello, I don't know where to start. I Recently moved from Vercel to Netlify, and I cannot get it to work with my Tanstack Start project. Everytime I navigate to my app https://flowthings.netlify.app/, I get the following error: ```js...

genetic-orange

1/26/2025

Is there a way to change the default navigation behavior to preserve search params?

Question speaks for itsself haha. But I'd like to not have to write this everywhere....

  search={(n) => n}

  search={(n) => n}

...

environmental-rose

1/26/2025

How do I show a toast from loader error?

Previously I used useEffect to make fetch data and if there was any error used catch to show a toast ```ts useEffect(() => { const fetch = async () => { try {...

environmental-rose

1/25/2025

How to access path params from inside child or grand child which in separate file?

``` function RouteComponent() { const { id } = Route.useParams(); return <BlogPage id={id} />;...

passive-yellow

1/24/2025

Anyone move from NextJS -> Router? How big of a PITA was it?

For clarity, I'm NOT using any major SSR, nor a monorepo. I have a NestJS backend deployed on Railway currently. I am currently using ShadCN, Tailwind, and Clerk though....

environmental-rose

1/24/2025

how to navigate to dynamic route using hard-coded path?

This is the route blogs/$id and I wanna navigate to /blogs/1 when I did this navigate({ to: '/blogs/1',}); I get error ```...

eager-peach

1/23/2025

Not Found "Fuzzy" mode (default) not bubbling to the root not found component

I only have one Not Found Component configured, that is in my root root.tsx route. When navigating to /valid/invalid-route it shows me the generic 404 not found and tanstack throws a warning in the console about configuring my own 404 not found page which I already have in my root.tsx file....

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs