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
How to prevent router from breaking mantine styles
Anyone setup tanstack router for use with an app that uses mantine components / styles? I've noticed that no matter where I put the <MantineProvider> tag (above router in the tree, within router in the tree, in the root route) it no longer works... specifically breaking all of the styles. I'm not super experienced with mantine or tanstack router to know why this might be breaking.
It seems like the components themselves work, but the MantineProvider doesnt seem like its providing styles to any of those components, nor is it providing css variables to css included elsewhere.
I searched and saw some mentions of polymorphic components not working or something... I have no idea if that is related at all. Basically I just dont see styles beign applied...
Need help with Breadcrumb component using Shadcn UI and Tanstack Router
Hi everyone,
I'm trying to build a breadcrumb component using Shadcn UI and Tanstack Router, but I'm running into some issues. I found some code online that I've been trying to use, but it's not working as expected.
The code I've been using looks like this:...
Looking to animate my route changes (fade-to-black type thing)
How would I go about this with the router? Is it compatible with framer-motion or other established patterns of achieving this? If not, how might you implement animated route changes?
I tried looking for examples online and ultimately came up empty handed....
Why might search be persisted through navigation?
I am wondering: why might search items be carried through an imperative call to
navigate({ to: '/some-place' }) (from useNavigate())? I cannot for the life of me figure out why, since the default behavior seems to be to clear the search items when navigate() is called even without explicit search: {}. In my case, explicitly calling navigate({ to: '/some-place', search: {} }) does not work--the search string is carried through. I cannot unfortunately reproduce this in a sample project...Delay in loading component with tanstack lazy loading
Hi,
I’m implementing lazy loading with TanStack Router in my React application. I’m facing an issue with a small delay in rendering the component after the URL gets updated. Ideally, the URL should update immediately, and while the new component is loading, a pendingComponent should be displayed. However, in my case, the pendingComponent only shows up on the first page load. For subsequent navigations, the URL updates but there is a small delay in rendering the new component, and during this time, the old component remains visible.
Router Setup...
useParams typescript error
I have some shared components that i use across different routers. I wanna use useParams hook but sometimes params is not on URL and passed to component like a param. In this cases i got TS error:
example:
...
const someId =
useParams({ strict: false })?.someId || props.someId;
const someId =
useParams({ strict: false })?.someId || props.someId;
<Link> in RouterContextProvider doesn't navigate to link
Hi,
I'm currently building a project that uses a variety of packages. Each of these packages has it's own instance of
@tanstack/react-router. I'm trying to create a <Link> between two of these packages. Since package A does not know of the existance of package B, I'm wrapping the URL in a <RouterContextProvider> with the router being the router in the other package. All is well so far; I get the correct suggestions now and everything seems like it works.
Problem now is, when clicking the link in the browser, the URL in the browser actually gets changed to the correct one, but the browser never navigates away from the page. Is this something I am doing wrong? The <a> in the browser has all the correct attributes, so I'm kinda confused here....'rules-of-hooks' ESLint rule conflicts with inline route components
When Should we just never write components inline like this? Functionally it makes no difference. That would be just to appease this rule. Any recommendations?...
plugin-hooks/recommended is used, the following code causes an ESLint error:const Route = createRoute({
component: () => {
useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks
const Route = createRoute({
component: () => {
useState() // React Hook "useState" is called in function "component" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". eslintreact-hooks/rules-of-hooks
Abort preload when navigating to different route
I use tanstack router in combination with tanstack query.
In my route loader function I use
queryClient.ensureQueryData. This loader is triggered with I hover over the Link component (because of the preload functionality).
```tsx
......TanStack Router Docs Wrong? - Auth Example
Is it possible this is a typo?
https://tanstack.com/router/latest/docs/framework/react/guide/authenticated-routes
Under redirecting...
Updated routes broke my application.
I can no longer access a specific user or a specific organisation by their id. Have I done something that messes up the routes?
I have even tried to remove the
routeTree.gen.ts to regenerate it....
Do you typically put route components inline or import external components ?
Hi,
I'm working on an app with tanstack router using a feature-based folder structure and file-based routing and was wondering how people typically achieve a structure like this.
In the vast majority of TR articles/tutorials/etc I see people directly coding their route components (effectively the views/pages) within the route files but for large pages this seems clunky. I guess this could be useful for heavily nested uis but mine so far is fairly straight forward with one page per route (aside from layout routes etc). I assume there's no hard and fast rule here, but I'd be interested in hearing how more experienced TR devs do it....
Loading data in router using tanstack-query but need api token from react hook
I'm looking to load some data within my routes using the
loader method. However, my scenario is that accessing my API server requires a JWT token and the only method I have available for that is a react hook. Since the loader isn't a react component, I can't straightforwardly call my getToken() method from there.
I'm keen on being able to do this so if anyone has any suggestions I'd appreciate hearing them. For one thing, I'd need this in order to do any data loading via the router. For another, my current use case is that I need to load data in the router so that I can dynamically populate my breadcrumb trail. The idea is that when accessing the path /entity/{id}, the router can look up the relevant entity by its id and display e.g. its name or title in the breadcrumb trail. In principle, this can work (see e.g. https://github.com/TanStack/router/discussions/895). But not being able to access the getToken() method is currently preventing me from doing this in the most obvious way.
For context, I'm using axios to handle my API calls and I have a useEffect() in my root route (routes/__root.tsx) which adds an interceptor to my axios instance which calls getToken() and then adds it to the axios request as an authorization header. This works for regular uses of useQuery within my react components and pages. But I can't figure out how to make it work in the router's loader method. Any ideas would be much appreciated!...How to get route context correctly typed?
Hi everyone,
could someone help me understand how
match.routeContext gets its type? I was reading the documentation about "Processing Accumulated Route Context" and from my understanding the type should extend the Router Context defined in createRootRouteWithContext. But I get an error if I try to access the properties that I define in Router Context. Should I define the correct type somewhere else?
Edit: I made a codesandbox...
getting issue with pending component
I'm working with TanStack Router and have a few questions. My use case involves calling some APIs that are common to a few child routes. I'm using the beforeLoad method in the root route to fetch this data and set it up in the route context, so each route has access to this data. However, I'm encountering some issues:
The pending component does not display when beforeLoad is fetching data for any route, whether it's the root or any child route.
The pending component does not display when the loader is loading for the __root route....
possibility to check if can go back
Hello 👋
Does any one knows how to implement check if there is a route in history to go back in order to prevent leaving my application when coming from browser link?
I know that such feature exists in react-router, but I don’t wanna go back to it after trying typed routes and query params....
Nested route group navigation
I have the following file-based structure:
```
/user/$id
- route.tsx - layout file for users...
How to configure router with queryClient in context?
I'm interested in using the router to load/pre-load data via react-query. The example code at "How about an external data fetching library? (https://tanstack.com/router/latest/docs/framework/react/guide/router-context#how-about-an-external-data-fetching-library) is:
`import {
createRootRouteWithContext,
createRouter,
} from '@tanstack/react-router'...