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

typical-coral

5/6/2024

How to make server request on each route change

Hello, I was wondering if it is possible to make server requests on each route change? While I was testing out Tanstack router + Vite, I hit a minor edge-case with with my SSR setup. In short I have an index.html template, which setups the <head> with some metatags for example <title>{{pageTitle}}</title> . The <head></head> is then read from the index.html and passed to the client through the Router Context. Then I run a transformerFn, to the stream to replace the {{pageTitle}} with one coming from route's staticData. ...

evident-indigo

5/6/2024

How can I combine file based routing with external stylesheets?

How can I prevent that routeTree.gen.ts creates a route for the stylesheet? If I use exernal stylsheets for my pages, I get things like this in the routeTree.gen.ts: ```const ContactsIndexStyleRoute = ContactsIndexStyleImport.update({...

ratty-blush

5/5/2024

Router state is always pending

After updating from 1.29.2 -> 1.31.20, useRouterState({ select: (s) => s.status === "pending" }) always returns true.

foreign-sapphire

5/5/2024

Display different content depending on whether one is authenticated or not

Hey there! 👋 I've used https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes and file-based routing with great success in a React app with a straightforward directory and file structure: ``` routes - _authed...

rare-sapphire

5/5/2024

Form Drawer - To route or not route?

Would there be any major benefit to giving a form drawer a route? For instance /invoices route displays table and /invoices/new or /invoices/$id displays a form within a drawer over the main invoices list. Or just keep the drawer open/close and rendering within the component logic?...

ratty-blush

5/3/2024

Accessing route data outside react components and hooks

Is there a way to access route's data (and params and searchparams, etc...) outside react components and hooks like there is for tanstack query via getQueryData?

other-emerald

5/3/2024

router mock for tests and stories

What's the best way to have a mock implementation of the router? For example: - we have components that we want to render in storybook, but they depend on useParams(). Ideally, we'd just wrap it in a Provider with a given path. - we have cypress component tests, where we mount a component and then interact with it. It might e.g. click a link, but it shouldn't really navigate to that route (because the test is scoped to a component). Ideally, we'd set the navigate method of the router to a spy. In nextJs, we had next-router-mock, a 3rd party package that would mock the router via a Provider. It worked okay (but not great). Is there anything for the TanStack Router? Thanks 🙏...

fascinating-indigo

5/3/2024

useSuspenseQuery gets called although `loader` already fetched the data.

Hello everyone. I'm curious that this is the default behavior or I'm missing something? I follow the guide A more realistic example using TanStack Query in External Data Loading section in router docs. When I go to the page, ensureQueryData in loader gets called to fetch the data. After data is fetched, component is rendered. I expect that useSuspenseQuery in the component will use data that loader already fetched from the cache. Turns out it doesn't. useSuspenseQuery gets called to fetch the data again. This is the first time I use this approach. If I was wrong, please fix me. Thank you so much!!...

unwilling-turquoise

5/2/2024

Linking to the same child-page with a different path-parameter from root component (nav-bar)

Hi! <Aside> I'm new to typescript and react and found this awesome library for dealing with routes. Love it! Thanks for putting in the time and effort to create such a wonderful helper! </Aside>...

ratty-blush

5/1/2024

Working on `router` though `tanstack.com`

This is more a tanstack.com question then router perhaps. Has anyone manage to work on the router packages with a local version of both router and tanstack.com? The setup I have is this: ```...

like-gold

5/1/2024

How to pass multiple links to a component

Hi ! In my app, I use components that contains multiple links and I want these links to be configurable in its parent component. I just want to pass links props to a child component that will create links with these props. What is the best way to do that ?...

conscious-sapphire

5/1/2024

Is there a exported type that returns all available absolute routes?

Hi! I have this example where i have an array of objects used for a long list of links: ```...

correct-apricot

5/1/2024

Update Parent Route From Child Route After Mutation

How do I get the parent routes loader to refire after a mutation on my child route? I would like to do this from within my child route if possible. My parent route contains a list that the child route can update so I need to refresh it once I've submitted the form successfully....

fair-rose

4/30/2024

redirecting in beforeLoader changes url but not the mounted component

hey all i had a quick question regarding the redirect feature ```js export const Route = createFileRoute("/auth/instagram")({...

ambitious-aqua

4/30/2024

Setting up a keylogging component to navigate to specific section of site

Hi I have a component which checks for our university's student identifier format which can come in from a barcode scanner we have and if one is detected I'd like to redirect the client to a page to sign them in. This is my current code https://gist.github.com/Gobot1234/e6178026a3f21fcf4eb3e8812c9d719c current I get a warning with the component Warning: useRouter must be used inside a <RouterProvider> component! this is how I mount everything ```ts function InnerApp() { const auth = useAuth();...

rare-sapphire

4/30/2024

Multiple root routers with file based routing

Hi, I would like to know if it was possible, using the file based router mode, to create within the same project multiple root “routers”. Specifically my use case is that I am creating a browser extension using Plasmo, and so it is as if I have to create multiple separate applications (popup, content, etc.) within a single project containing a single package.json ....

absent-sapphire

4/29/2024

`loader` function doesn't have access to `context` after being redirected to

I load a route and check some things in the loader function. If it errors, I throw redirect to another route. That route, however, doesn't seem to have access to the context in its loader function. routes/offers.tsx ``` ......

manual-pink

4/29/2024

How to type LazyRoute with code-based splitting?

I tried to implement route based code splitting following this section of the docs: https://tanstack.com/router/latest/docs/framework/react/guide/code-splitting#code-based-splitting When I implemented as shown in the example, I get following eslint error:

Unsafe return of type Promise<any> from function with return type Promise<LazyRoute<any>>.eslint@typescript-eslint/no-unsafe-return...

deep-jade

4/29/2024

ActiveOptions matcher fn

https://tanstack.com/router/latest/docs/framework/react/guide/navigation#active-options Would it be possible to have a matcher function for the ActiveOptions?
I have an invoices route in my sidebar with additional options to filter the invoice by status. When I search the invoices, the 'search' searchParam is updated which removes the active state on route....

evident-indigo

4/29/2024

useId use

Hi everyone, what is the use of useId hook? why can’t we use hard coded id for related elements as shown in the example in react documentation?...

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