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

national-gold

7/31/2024

Why providing queryClient as context

I have a question about the use of queryClient and providing it to the createRouter context. I wonder why should a user do that? The entire app inclusively the router can use the queryClient directly? ```ts //https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-based...

probable-pink

7/30/2024

Styling parent of <Link> with active state

I'd like to style a navigation that's structured like this:```html <ul> <li className="active"> <Link to="/foo">...</Link> </li>...

probable-pink

7/30/2024

"The useLoaderData hook accepts a single optional argument" - TypeScript says it's not optional

The docs that say this: https://tanstack.com/router/latest/docs/framework/react/api/router/useLoaderDataHook#useloaderdata-options When i use it:...

probable-pink

7/30/2024

Using TSR in an existing app that already uses GET param routing

Hi, i'd like to use TSR in an app that already uses a GET param for routing, i.e. i'd like to use TSR while on this URL: example.com/?module=foo. The module=foo param will always be there and i'd like to make TSR use additional GET params to store the current client-side-only route / parameters, e.g. example.com/?module=foo&page=about. Is this possible?...

deep-jade

7/29/2024

Typing issue with IntelliJ IDEA

Hi, I noticed the following error on a TR skeleton project (first time TR user following the docs!). ```...

stormy-gold

7/29/2024

How to invalidate route from the __root.tsx?

Hello, I have PWA background-sync mechanism in my app and I sent a message with some data from service-worker to the app. I'd like to handle these messages in one listener, in __root.tsx. When I go to /about page and there's no internet connection, I render ErrorComponent but I'd like to reload this page once I'm online again (so it's when I get message from sw) That's what I tried: ```...

genetic-orange

7/27/2024

Accessing Path Params For Component in createRoute

Lets say i have a general component that accepts a prop called id, how would I pass that id to my component without having to define route functions inside my component. I'm wondering if something like this is possible: ``` const Route = createFileRoute('/posts/$postId')({ component: () => <PostComponent id={id} /> })...

harsh-harlequin

7/26/2024

useAwaited / no fallback?

Hello, I'd like to access deferred loader data outside the render prop, but doing so (using useAwaited) prevents fallback from being rendered. Is this by design (limits utility of deferred data) and/or is there an alternate solution?

eastern-cyan

7/26/2024

Auth context initially returns null and doesn't redirect/rerender after update

Hi folks! I'm fairly new to Tanstack Router and loving it, but I'm having some issues with my Router Context. To sum up:...

continuing-cyan

7/25/2024

Lazy file and lazy route the route will not mount the component

When I have a lazy file and lazy route the route will not mount the component. It will instead show a empty/blank/white screen. does each .lazy file need a .index file or .route file to avoid a blank page being displayed in your app?

correct-apricot

7/25/2024

Loader can be triggered by Link Component but not when using useNavigate.

When clicking the Link Component the destination loader is being triggered but when using navigate the destination component is being rendered but the loader was not triggered.

plain-purple

7/24/2024

Handling nested routes (migrating from react-router dom)

There is a way to describe nested routes in a component without importing them into the router.tsx (code-based way) here is tsx return ``` <ContextProvider> <Routes> ...

equal-aqua

7/24/2024

Help with @tanstack/react-router Error using useNAvigate

TypeError: Cannot read properties of null (reading 'navigate') at @tanstack_react-router.js?v=1303dc0b:2914:21 at login (AuthContext.tsx:58:13) at async handleSubmit (login.tsx:39:5) ...

optimistic-gold

7/24/2024

I want to navigate and have the behavior of window.history.replaceState

Is there a way to navigate() without contributing to the history object? Maybe a different navigate method or a flag I can use or something?

passive-yellow

7/23/2024

Router TS Issues

Router TS Issue I am having a TS issue on the "to" in my Link component. I am not sure what causes this as I am pretty new to TSR. ```...

fair-rose

7/22/2024

Outlet is not displaying as expected

Hello, I have created a route tree using the following folder structure ``` routes...

crude-lavender

7/21/2024

Is it possible to narrow auth type on authenticated routes?

Hi, for the sake of simplicity, let's talk about authenticated routes example from the documentation: https://tanstack.com/router/latest/docs/framework/react/examples/authenticated-routes If you look at _auth.dashboard.tsx, auth.user is of type string | null. I would like it to be just string, since I assume the user to be valid at this point. If I should not do this and instead redirect to login on invalid user in each route, what would be the reasons for that?...

exotic-emerald

7/20/2024

how do I add a public path prefix to the file router generator?

I'm unable to find the configuration to set the public path prefix for the router generator, e.g. it generates the route route to be on "/" - but it should be on "/core-module"

genetic-orange

7/18/2024

Route masking with file based routing

Hi guys, I'm trying to implement a route mask for one of my routes, but I cannot find if it's even possible with file based routing. The documentation and the example app are both for code based routing, and there's no mention if it's possible or not. Thanks for the answers!

rival-black

7/18/2024

_authenticated.tsx doesn't work.

I have the code in the attached screenshot in an _authenticated.tsx file in the "routes" directory but nothing happens.

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