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

genetic-orange

1/18/2024

How can I execute several navigations sequentially?

Hey 👋🏽 , I have following use case: There's a list of users. The list offers an onUserSelect and an onUserClick callback. My eventhandler of the onUserSelect, looks like this: ```js...

xenial-black

1/18/2024

useMutation Error and Type Safe

Please Help!!! I have tried many tricks to make this work but the error keeps coming ```tsx export const formSchema = z .object({...

correct-apricot

1/16/2024

Is useNavigate available in components set by InnerWrap?

When we try to access the useNavigate hook in an InnerWrap component we get:

Uncaught TypeError: Cannot read properties of undefined (reading 'routeId')

Uncaught TypeError: Cannot read properties of undefined (reading 'routeId')

useRouterState appears to work fine....

conscious-sapphire

1/16/2024

Get loader function context type for a route?

Is there a way to get the loader context type for a specific route for code split loaders? e.g. export const loader = (ctx: <context type for "/foo">) => ......

rare-sapphire

1/16/2024

How to track page views?

Hi, I'm using posthog-js (similar to Google Analytics) to track page views, since tanstack router navigates on the client side, I need to manually trigger the tracking method. ``` const rootRoute = new RootRoute({ beforeLoad: () => {...

vicious-gold

1/15/2024

Should HMR Work?

Working on my first non-trivial app with Router, and I've noticed that on a project page, which loads the project using the route loader, making any change to the code triggers a full refetch of the data. Is this intentional or is it something about my setup. Things I've tried: - adding staleTime to the route to try to keep it from refreshing...

vicious-gold

1/14/2024

Does anyone know why I'm getting this type error (also my Link's aren't correctly inferring paths) in this really simple router?

fair-rose

1/14/2024

Pathless directories after dynamic directory not being excluded in url?

https://stackblitz.com/edit/tanstack-router-cqjfmc?file=src%2Froutes%2F_auth%2F%24teamId%2F_detail-layout.tsx - Navigate to New Layout Directory, - runtime pathname is /123/detail-layout/route2/123 but the route ID is /_auth/$teamId/_detail-layout, detail-layout is included in the URL - original layout route which is nested in _auth but not $teamId works as expected, with runtime path /layout-a...

flat-fuchsia

1/13/2024

useMatchRoute

If i understand correctly using matchRoute and setting fuzzy true, would mean if I am lets say in route /posts/10, and set the

matchRoute({ to: '/posts', fuzzy: true })

matchRoute({ to: '/posts', fuzzy: true })

then it should return params, meaning that the route matches ? But I even made a fork of one of the demos and it always seems to return false. https://codesandbox.io/p/devbox/upbeat-dan-fvfhxd...

harsh-harlequin

1/13/2024

Protect the whole app

Hi! I'm scaffolding of the kitchen sink example and i have this scenario, i need the whole app to be protected under auth, except for the /login route, how can I achieve this? If any other route is accessed i want it to redirect to the login page, would this only be achieved if I use the beforeLoad an all of the routes?

fair-rose

1/12/2024

Integrating reusable tanstack table

I figured I'd ask this since I don't think it's been discussed. I have a reusable data table component (shadcn data-table). I think this works as expected for syncing the search params and path params with the data table state However I'm not sure if this is the best approach so figured I'd leave this up here...

correct-apricot

1/12/2024

Return `fullPath` property from `new RouteApi({ id : "..." })`

The route fullPath property use required to for example use the navigate function with both from and search, but new RouteApi({ id : "..." }) only returns the route id, which generates type errors when trying to do something like this: ```ts const navigate = useNavigate()...

exotic-emerald

1/12/2024

Search params example raises type errors

Following this example: https://tanstack.com/router/v1/docs/guide/search-params#enter-validation--typescript The return value of validate search raises type errors. Specifically: ```ts...

exotic-emerald

1/12/2024

Basic router question on routing outside of context

Hello, I'm trying to use router.navigate({ to: '/dashboard', replace: true }); by importing router outside of the useNavigate context. This is because I want my auth listener to handling routing to/from login state and this lives in main.tsx at the parent level of RouterProvider. My question is, is it safe to just import router and call router.navigate({ to: '/dashboard', replace: true }); right away or should I check for any kind of initialization or existence before calling navigate right away? Also if there is a better way to handle this I would appreciate any help, this is how my code is set up currently main.tsx has ```const renderApp = () => {...

eastern-cyan

1/11/2024

Multiple routers

Is it possible to have/register multiple distinct routers in one app? Use case is multiple different windows / views in an electron app. Probably silly but curious now if it’s possible I tried a few approaches but couldn’t get the types working: 1: Tried path ‘alias’ in tsconfig, makes sense that didn’t work...

fair-rose

1/11/2024

Invalidate loader data

How can I invalidate the loader data after certain mutation. I tried using queryClient.invalidateQueries and it doesn't seem to work Here is my loader ```tsx export const Route = new FileRoute(...

fair-rose

1/11/2024

Not found routes with CLI?

It seems like the docs don't mention how not founds work using the CLI? Any suggestions? The doc reference the non-CLI method ```ts...

rare-sapphire

1/10/2024

Handling CSS and SSR hydration

Copying from the example projects, I have a __root.tsx file that declares the well known ```html <html> <head></head>...

equal-aqua

1/9/2024

Search params on the home route

I'm basing my work on the basic-ssr-streaming-file-based example and I now have a loader and loaderDeps on that route to load pages of data for the home route. The initial render works fine, I get whatever page was sent in and retrieve the data in the loader. But when I use a Link to navigate to subsequent pages the URL updates but the content of the page doesn't reload. Does that need to be in a nested route or something? I was hoping it would just update the page with the new content...

rare-sapphire

1/9/2024

Implicit any Typescript error on index route under layout

Gday I'm running into typescript error on an index route nested under a layout.

'Route' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

'Route' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

Here's a stackblitz that reproduces the error:...

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