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

5/7/2024

Router.status is always "pending" when you wrap the `RouterProvider` in `StrictMode`.

I noticed that if you wrap the RouterProvider in React.StrictMode, the status of the Router will always be "pending". This also happens with the "basic-file-based" example on GitHub (https://github.com/tanstack/router/tree/main/examples/react/basic-file-based). Is this correct behavior? Due to this issue, you can never get the correct resolvedLocation, because this will always return the first location you visited....

rare-sapphire

5/7/2024

How to get type of Component which create by using createLink() function? Thanks

How to get type of props in Component which create by using createLink() function? Thanks

latin-magenta

5/7/2024

Declarative search param masking is lagging

I'm trying to use declarative route masking to clean up the url by not showing default search params. Navigating to my list page I want the user to see example.com/list and not example.com/list?page=1&search=&sortBy=date&sortOrder=asc&status=active&.... https://codesandbox.io/p/devbox/tsr-search-masking-question-vcds2n A simplified example is this route mask:...

national-gold

5/7/2024

What is the preferred/recommended way to implement protected routes?

I gave https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes a read and was still unsure what the preferred way would be, using Tanstack Router. The _authenticated.tsx is rather simple but fits really well. And I'm still unsure what the approach would be if I had a RBAC requirement for my routes. In a way that people without the expected claims/roles would not be able to view these routes....

afraid-scarlet

5/7/2024

loader vs beforeLoad

What is the difference between them? Which circumstances should I use one for another?

national-gold

5/7/2024

Equivalent of navigate(-1) using react router?

complex-teal

5/6/2024

Title Not Setting on Document in Meta Route Prop

Does the router automatically set the document title using the Meta prop on a route? I set the title in the meta function, but it's not changing the title on the tab in the browser. This feature was mentioned here: https://github.com/TanStack/router/discussions/895#discussioncomment-9064913 But looking through the Tanstack website (the screenshot), I couldn't figure out how exactly it works. I'm using this in a SPA, but I'm not sure if that detail matters....

exotic-emerald

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. ...

adverse-sapphire

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({...

continuing-cyan

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.

fascinating-indigo

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...

correct-apricot

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?...

continuing-cyan

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?

quickest-silver

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 🙏...

dependent-tan

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!!...

sensitive-blue

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>...

harsh-harlequin

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: ```...

fascinating-indigo

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 ?...

absent-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....

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